chore: release 1.4.56

fix: workflow
* fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix --------- Co-authored-by: charlesgauthereau <charles.gauthereau@soluce-technologies.com>
2026-07-14 11:16:13 +02:00 · 2026-03-06 20:47:32 +00:00 · 2026-03-06 21:47:00 +01:00 · 2026-03-06 20:33:33 +00:00 · 2026-03-06 21:33:05 +01:00 · 2026-03-06 18:25:30 +00:00
10 changed files with 452 additions and 246 deletions
@@ -1,46 +0,0 @@
-name: Auto Release bot
-
-on:
-  pull_request:
-    types: [closed]
-    branches:
-      - main
-
-jobs:
-  release:
-    if: github.event.pull_request.merged == true
-    runs-on: ubuntu-latest
-    permissions:
-      contents: write
-
-    steps:
-      - uses: actions/create-github-app-token@v1
-        id: app-token
-        with:
-          app-id: ${{ vars.APP_ID }}
-          private-key: ${{ secrets.APP_PRIVATE_KEY }}
-
-      - uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          token: ${{ steps.app-token.outputs.token }}
-          ref: ${{ github.base_ref }}
-
-      - uses: pnpm/action-setup@v4
-
-      - uses: actions/setup-node@v4
-        with:
-          node-version: "lts/*"
-          cache: "pnpm"
-
-      - run: pnpm install --frozen-lockfile
-
-      - run: git config --global user.name 'github-actions[bot]'
-      - run: git config --global user.email 'github-actions[bot]@users.noreply.github.com'
-
-      - name: Run release-it
-        run: |
-          git pull origin main
-          pnpm exec release-it --ci
-        env:
-          GITHUB_TOKEN: ${{ steps.app-token.outputs.token }}
@@ -3,6 +3,9 @@ name: Discord Notification
 on:
  workflow_call:
    inputs:
+      release_tag:
+        required: true
+        type: string
      discord_title:
        required: true
        type: string
@@ -27,10 +30,10 @@ jobs:
          DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
          GH_TOKEN: ${{ secrets.GH_TOKEN }}
        run: |
-          RELEASE_INFO=$(gh release view "${{ github.ref_name }}" -R ${{ github.repository }} --json name,url,body,author)
+          RELEASE_INFO=$(gh release view "${{ inputs.release_tag }}" -R ${{ github.repository }} --json name,url,body,author)

          RELEASE_TITLE=$(echo "$RELEASE_INFO" | jq -r .name)
-          if [ -z "$RELEASE_TITLE" ] || [ "$RELEASE_TITLE" = "null" ]; then RELEASE_TITLE="${{ github.ref_name }}"; fi
+          if [ -z "$RELEASE_TITLE" ] || [ "$RELEASE_TITLE" = "null" ]; then RELEASE_TITLE="${{ inputs.release_tag }}"; fi

          RELEASE_URL=$(echo "$RELEASE_INFO" | jq -r .url)
          RELEASE_BODY=$(echo "$RELEASE_INFO" | jq -r .body)
@@ -3,6 +3,9 @@ name: Docker Publish
 on:
  workflow_call:
    inputs:
+      version:
+        required: true
+        type: string
      image_name:
        required: false
        type: string
@@ -32,7 +35,7 @@ jobs:
    strategy:
      fail-fast: false
      matrix:
-        platform: [linux/amd64, linux/arm64]
+        platform: [ linux/amd64, linux/arm64 ]
    steps:
      - name: Checkout
        uses: actions/checkout@v4
@@ -50,9 +53,10 @@ jobs:
        id: prep
        run: |
          ARCH=${{ matrix.platform == 'linux/amd64' && 'amd64' || 'arm64' }}
-          echo "image=${{ inputs.image_name }}:${GITHUB_REF#refs/tags/}-$ARCH" >> $GITHUB_OUTPUT
+          echo "image=${{ inputs.image_name }}:${{inputs.version}}-$ARCH" >> $GITHUB_OUTPUT
          echo "safe_platform=${{ matrix.platform == 'linux/amd64' && 'linux-amd64' || 'linux-arm64' }}" >> $GITHUB_OUTPUT

+
      - name: Build and push image
        uses: docker/build-push-action@v6
        with:
@@ -95,20 +99,66 @@ jobs:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}

+#      - name: Extract Docker metadata
+#        id: meta
+#        uses: docker/metadata-action@v5
+#        with:
+#          images: ${{ inputs.image_name }}
+#          tags: |
+#            type=semver,pattern={{version}}
+#            type=semver,pattern={{major}}.{{minor}}
+#            type=semver,pattern={{major}}
+#            type=raw,value=latest,enable=${{ inputs.add_latest }}
+#
+#      #      - name: Create and push manifest list
+#      #        working-directory: /tmp/digests
+#      #        run: |
+#      #          DOCKER_IMAGES="$(cat amd64/image.txt) $(cat arm64/image.txt)"
+#      #          TAG_ARGS=$(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON")
+#      #          docker buildx imagetools create $DOCKER_IMAGES $TAG_ARGS
+#
+#
+#      - name: Create and push manifest list
+#        working-directory: /tmp/digests
+#        run: |
+#          DOCKER_IMAGES="$(cat amd64/image.txt) $(cat arm64/image.txt)"
+#          TAG_ARGS=$(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON")
+#          echo $TAG_ARGS
+#          docker buildx imagetools create $TAG_ARGS $DOCKER_IMAGES
+
+
+      - name: Generate semantic tags
+        id: tags
+        run: |
+          VERSION="${{ inputs.version }}"
+          IFS='.' read -r MAJOR MINOR PATCH <<< "$VERSION"
+          
+          echo "VERSION_TAG=$VERSION" >> $GITHUB_OUTPUT
+          if [ -n "$MINOR" ]; then
+            echo "MINOR_TAG=$MAJOR.$MINOR" >> $GITHUB_OUTPUT
+          fi
+          if [ -n "$MAJOR" ]; then
+            echo "MAJOR_TAG=$MAJOR" >> $GITHUB_OUTPUT
+          fi
+          if [ "${{ inputs.add_latest }}" = "true" ]; then
+            echo "LATEST_TAG=latest" >> $GITHUB_OUTPUT
+          fi
+
      - name: Extract Docker metadata
        id: meta
        uses: docker/metadata-action@v5
        with:
          images: ${{ inputs.image_name }}
          tags: |
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-            type=semver,pattern={{major}}
-            type=raw,value=latest,enable=${{ inputs.add_latest }}
+            type=raw,value=${{ steps.tags.outputs.VERSION_TAG }}
+            type=raw,value=${{ steps.tags.outputs.MINOR_TAG }}
+            type=raw,value=${{ steps.tags.outputs.MAJOR_TAG }}
+            type=raw,value=${{ steps.tags.outputs.LATEST_TAG }}

      - name: Create and push manifest list
        working-directory: /tmp/digests
        run: |
          DOCKER_IMAGES="$(cat amd64/image.txt) $(cat arm64/image.txt)"
          TAG_ARGS=$(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON")
-          docker buildx imagetools create $DOCKER_IMAGES $TAG_ARGS
+          echo $TAG_ARGS
+          docker buildx imagetools create $TAG_ARGS $DOCKER_IMAGES
@@ -1,47 +0,0 @@
-name: PR Checker
-
-on:
-  pull_request:
-    branches:
-      - main
-      - dev
-
-jobs:
-  validate-code:
-    name: Code Integrity Check
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "lts/*"
-          cache: "pnpm"
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Check code formatting
-        run: pnpm run format:check
-        continue-on-error: true
-
-      - name: Run Linter
-        run: pnpm run lint
-        continue-on-error: true
-
-      - name: Type Check
-        run: pnpm run typecheck
-        continue-on-error: true
-
-      - name: Run Tests
-        run: pnpm run test
-        continue-on-error: true
-
-      - name: Test Application Build
-        run: pnpm run build
@@ -1,31 +1,129 @@
-name: Publish Docker image for release
+name: Auto Release & Publish

 on:
-  push:
-    tags:
-      - "*.*.*"
-      - "!*-*"
+  pull_request:
+    types: [ closed ]
+    branches:
+      - main
+

 permissions:
-  contents: read
+  contents: write
  packages: write

 jobs:
-  docker_publish:
+  create-release:
+    if: github.event.pull_request.merged == true
+    runs-on: ubuntu-latest
+    outputs:
+      draft_tag: ${{ steps.release_step.outputs.draft_tag }}
+      version: ${{ steps.release_step.outputs.version }}
+    steps:
+      - uses: actions/create-github-app-token@v1
+        id: app-token
+        with:
+          app-id: ${{ vars.APP_ID }}
+          private-key: ${{ secrets.APP_PRIVATE_KEY }}
+
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          token: ${{ steps.app-token.outputs.token }}
+          ref: main
+
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "lts/*"
+          cache: "pnpm"
+
+      - run: pnpm install --frozen-lockfile
+
+      - run: |
+          git config --global user.name 'github-actions[bot]'
+          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
+
+
+#      - name: Run release-it
+#        id: release_step
+#        run: |
+#          git pull origin main
+#
+#
+#          VERSION=$(pnpm exec release-it --ci --release-version)
+#          echo "version=$VERSION"
+#          echo "version=$VERSION" >> $GITHUB_OUTPUT
+#
+#          OUTPUT=$(pnpm exec release-it --ci)
+#          echo "$OUTPUT"
+#          DRAFT_TAG=$(echo "$OUTPUT" | grep -o 'releases/tag/[^ ]*' | sed 's|releases/tag/||')
+#          echo "draft_tag=$DRAFT_TAG" >> $GITHUB_OUTPUT
+#        env:
+#          GITHUB_TOKEN: ${{ steps.app-token.outputs.token }}
+
+      - name: Run release-it
+        id: release_step
+        run: |
+          git pull origin main
+          
+          VERSION=$(pnpm exec release-it --ci --release-version)
+          echo $VERSION
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+          
+          OUTPUT=$(pnpm exec release-it --ci)
+          echo "$OUTPUT"
+          
+          DRAFT_TAG=$(echo "$OUTPUT" | grep -oE 'untagged-[a-z0-9]+')
+          echo $DRAFT_TAG
+          echo "draft_tag=$DRAFT_TAG" >> $GITHUB_OUTPUT
+        env:
+          GITHUB_TOKEN: ${{ steps.app-token.outputs.token }}
+
+
+
+  publish-docker:
+    needs: create-release
    uses: ./.github/workflows/docker.yml
    with:
+      version: ${{ needs.create-release.outputs.version }}
      add_latest: true
    secrets:
      DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME_2 }}
      DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD_2 }}

-  discord_notification:
-    needs: docker_publish
+  finalize-release:
+    needs:
+      - create-release
+      - publish-docker
+    runs-on: ubuntu-latest
+    outputs:
+      release_tag: ${{ steps.publish_release_step.outputs.release_tag }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Publish GitHub Release
+        id: publish_release_step
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          OUTPUT=$(gh release edit ${{ needs.create-release.outputs.draft_tag }} --draft=false)
+          echo "$OUTPUT"
+          RELEASE_TAG=$(echo "$OUTPUT" | sed -E 's|.*/releases/tag/||')
+          echo "release_tag=$RELEASE_TAG" >> $GITHUB_OUTPUT
+
+  notify-discord:
+    needs:
+      - publish-docker
+      - create-release
+      - finalize-release
    uses: ./.github/workflows/discord.yml
    with:
-      discord_title: "New Release: ${{ github.ref_name }}"
+      release_tag: ${{ needs.create-release.outputs.version }}
+      discord_title: "New Release"
      discord_color: 3066993
      discord_footer: "Portabase"
    secrets:
      DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
-      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -1,25 +1,57 @@
 {
+  "github": {
+    "release": true,
+    "draft": true,
+    "tokenRef": "GITHUB_TOKEN",
+    "update": true
+  },
  "git": {
    "commit": true,
-    "commitMessage": "chore: release v${version}",
+    "commitMessage": "chore: release ${version}",
    "requireCleanWorkingDir": true,
    "tag": true,
    "tagName": "${version}",
    "push": true
  },
-  "github": {
-    "release": true,
-    "tokenRef": "GITHUB_TOKEN"
-  },
  "plugins": {
    "@release-it/conventional-changelog": {
-      "preset": "angular"
+      "preset": {
+        "name": "conventionalcommits",
+        "types": [
+          {
+            "type": "feat",
+            "section": "✨ Features"
+          },
+          {
+            "type": "fix",
+            "section": "🐛 Bug Fixes"
+          },
+          {
+            "type": "perf",
+            "section": "⚡️ Performance Improvements"
+          },
+          {
+            "type": "revert",
+            "section": "⏪️ Reverts"
+          },
+          {
+            "type": "docs",
+            "section": "📝 Documentation",
+            "hidden": true
+          },
+          {
+            "type": "chore",
+            "section": "🔧 Chores",
+            "hidden": true
+          }
+        ]
+      }
    },
    "@release-it/bumper": {
      "out": {
        "file": "CITATION.cff",
        "path": "version",
-        "type": "text/plain"
+        "type": "text/yaml"
      }
    }
  }
@@ -1,6 +1,6 @@
 cff-version: 1.2.0
 title: Portabase
-message: "If you use this software, please cite it as below."
+message: If you use this software, please cite it as below.
 type: software
 authors:
  - family-names: Gauthereau
@@ -9,7 +9,12 @@ authors:
    given-names: Killian
 repository-code: https://github.com/Portabase/portabase
 url: https://portabase.io
-abstract: "Portabase is a free, open-source, self-hosted solution for database administration, providing backup and restore capabilities, scheduling, retention policies, notifications, and support for multiple storage backends. Its headless agent architecture enables connection to multiple database instances securely and efficiently."
+abstract: >-
+  Portabase is a free, open-source, self-hosted solution for database
+  administration, providing backup and restore capabilities, scheduling,
+  retention policies, notifications, and support for multiple storage backends.
+  Its headless agent architecture enables connection to multiple database
+  instances securely and efficiently.
 keywords:
  - docker
  - kubernetes
@@ -26,5 +31,5 @@ keywords:
  - web-ui
  - agent
 license: Apache-2.0
-version: 1.4.3
-date-released: "2026-03-02"
+version: 1.4.56
+date-released: '2026-03-02'
@@ -1,6 +1,6 @@
 {
  "name": "portabase",
-  "version": "1.4.12",
+  "version": "1.4.56",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack -p 8887",
@@ -50,7 +50,6 @@
    "@t3-oss/env-nextjs": "^0.13.10",
    "@tanstack/react-query": "^5.90.21",
    "@tanstack/react-table": "^8.21.3",
-    "@types/express": "^5.0.6",
    "@types/nodemailer": "^6.4.23",
    "@types/ws": "^8.18.1",
    "@zenstackhq/runtime": "2.14.2",
@@ -113,9 +113,6 @@ importers:
      '@tanstack/react-table':
        specifier: ^8.21.3
        version: 8.21.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
-      '@types/express':
-        specifier: ^5.0.6
-        version: 5.0.6
      '@types/nodemailer':
        specifier: ^6.4.23
        version: 6.4.23
@@ -3143,12 +3140,6 @@ packages:
  '@tybys/wasm-util@0.10.1':
    resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}

-  '@types/body-parser@1.19.6':
-    resolution: {integrity: sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==}
-
-  '@types/connect@3.4.38':
-    resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
-
  '@types/cors@2.8.19':
    resolution: {integrity: sha512-mFNylyeyqN93lfe/9CSxOGREz8cpzAhH+E93xJ4xWQf62V8sQ/24reV2nyzUWM6H6Xji+GGHpkbLe7pVoUEskg==}

@@ -3191,15 +3182,6 @@ packages:
  '@types/estree@1.0.8':
    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}

-  '@types/express-serve-static-core@5.1.1':
-    resolution: {integrity: sha512-v4zIMr/cX7/d2BpAEX3KNKL/JrT1s43s96lLvvdTmza1oEvDudCqK9aF/djc/SWgy8Yh0h30TZx5VpzqFCxk5A==}
-
-  '@types/express@5.0.6':
-    resolution: {integrity: sha512-sKYVuV7Sv9fbPIt/442koC7+IIwK5olP1KWeD88e/idgoJqDm3JV/YUiPwkoKK92ylff2MGxSz1CSjsXelx0YA==}
-
-  '@types/http-errors@2.0.5':
-    resolution: {integrity: sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg==}
-
  '@types/json-schema@7.0.15':
    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}

@@ -3237,12 +3219,6 @@ packages:
  '@types/prismjs@1.26.6':
    resolution: {integrity: sha512-vqlvI7qlMvcCBbVe0AKAb4f97//Hy0EBTaiW8AalRnG/xAN5zOiWWyrNqNXeq8+KAuvRewjCVY1+IPxk4RdNYw==}

-  '@types/qs@6.14.0':
-    resolution: {integrity: sha512-eOunJqu0K1923aExK6y8p6fsihYEn/BYuQ4g0CxAAgFc4b/ZLN4CrsRZ55srTdqoiLzU2B2evC+apEIxprEzkQ==}
-
-  '@types/range-parser@1.2.7':
-    resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
-
  '@types/react-dom@19.0.4':
    resolution: {integrity: sha512-4fSQ8vWFkg+TGhePfUzVmat3eC14TXYSsiiDSLI0dVLsrm9gZFABjPy/Qu6TKgl1tq1Bu1yDsuQgY3A3DOjCcg==}
    peerDependencies:
@@ -3259,12 +3235,6 @@ packages:
  '@types/react@19.2.14':
    resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==}

-  '@types/send@1.2.1':
-    resolution: {integrity: sha512-arsCikDvlU99zl1g69TcAB3mzZPpxgw0UQnaHeC1Nwb015xp8bknZv5rIfri9xTOcMuaVgvabfIRA7PSZVuZIQ==}
-
-  '@types/serve-static@2.2.0':
-    resolution: {integrity: sha512-8mam4H1NHLtu7nmtalF7eyBH14QyOASmcxHhSfEoRyr0nP/YdoesEtU+uSRvMe96TW/HPTtkoKqQLl53N7UXMQ==}
-
  '@types/webpack@5.28.5':
    resolution: {integrity: sha512-wR87cgvxj3p6D0Crt1r5avwqffqPXUkNlnQ1mjU93G7gCuFjufZR4I6j8cz5g1F1tTYpfOOFvly+cmIQwL9wvw==}

@@ -10490,15 +10460,6 @@ snapshots:
      tslib: 2.8.1
    optional: true

-  '@types/body-parser@1.19.6':
-    dependencies:
-      '@types/connect': 3.4.38
-      '@types/node': 22.19.11
-
-  '@types/connect@3.4.38':
-    dependencies:
-      '@types/node': 22.19.11
-
  '@types/cors@2.8.19':
    dependencies:
      '@types/node': 22.19.11
@@ -10543,21 +10504,6 @@ snapshots:

  '@types/estree@1.0.8': {}

-  '@types/express-serve-static-core@5.1.1':
-    dependencies:
-      '@types/node': 22.19.11
-      '@types/qs': 6.14.0
-      '@types/range-parser': 1.2.7
-      '@types/send': 1.2.1
-
-  '@types/express@5.0.6':
-    dependencies:
-      '@types/body-parser': 1.19.6
-      '@types/express-serve-static-core': 5.1.1
-      '@types/serve-static': 2.2.0
-
-  '@types/http-errors@2.0.5': {}
-
  '@types/json-schema@7.0.15': {}

  '@types/json5@0.0.29': {}
@@ -10598,10 +10544,6 @@ snapshots:

  '@types/prismjs@1.26.6': {}

-  '@types/qs@6.14.0': {}
-
-  '@types/range-parser@1.2.7': {}
-
  '@types/react-dom@19.0.4(@types/react@19.0.10)':
    dependencies:
      '@types/react': 19.0.10
@@ -10618,15 +10560,6 @@ snapshots:
    dependencies:
      csstype: 3.2.3

-  '@types/send@1.2.1':
-    dependencies:
-      '@types/node': 22.19.11
-
-  '@types/serve-static@2.2.0':
-    dependencies:
-      '@types/http-errors': 2.0.5
-      '@types/node': 22.19.11
-
  '@types/webpack@5.28.5(esbuild@0.25.10)':
    dependencies:
      '@types/node': 22.19.11
@@ -1,62 +1,241 @@
-"use client"
-import {Eye} from "lucide-react";
-
-import {useState} from "react";
+"use client";
 import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogHeader,
-    DialogTitle,
-    DialogTrigger
+  AlertCircle,
+  Braces,
+  Database,
+  ExternalLink,
+  Eye,
+  Hash,
+  Server,
+  Sparkles,
+} from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
 } from "@/components/ui/dialog";
-import {Button} from "@/components/ui/button";
-import {Separator} from "@/components/ui/separator";
-import {NotificationLogWithRelations} from "@/db/services/notification-log";
+import type { NotificationLogWithRelations } from "@/db/services/notification-log";

 type NotificationLogModalProps = {
-    notificationLog: NotificationLogWithRelations;
-}
+  notificationLog: NotificationLogWithRelations;
+};

-export const NotificationLogModal = ({notificationLog}: NotificationLogModalProps) => {
-    const [open, setOpen] = useState(false);
+const getTroubleshootingForError = (errorMsg?: any) => {
+  if (!errorMsg || String(errorMsg).toLowerCase() === "null") return null;

-    return (
-        <Dialog open={open} onOpenChange={setOpen}>
-            <DialogTrigger asChild>
-                <Button variant="outline" onClick={() => setOpen(true)} className="relative">
-                    <Eye/>
-                </Button>
-            </DialogTrigger>
-            <DialogContent>
-                <DialogHeader>
-                    <DialogTitle>Notification details</DialogTitle>
-                    <DialogDescription>
-                        Details of the notification sent
-                    </DialogDescription>
-                    <Separator className="mt-3 mb-3"/>
+  const msg = String(errorMsg).toLowerCase();

-                    <div className="space-y-2 mb-4">
-                        <div>
-                            <span className="font-semibold">Title:</span>{" "}
-                            <span>{notificationLog.content.title}</span>
-                        </div>
-                        <div>
-                            <span className="font-semibold">Message:</span>{" "}
-                            <span>{notificationLog.content.message}</span>
-                        </div>
+  if (msg.includes("database connection") || msg.includes("agent")) {
+    return {
+      title: "Agent Connection Issue",
+      resolution:
+        "It appears the agent cannot reach the database. Please ensure that your agent is actively running, your PostgreSQL credentials are correct, and port 5432 is open on your firewall.",
+      docLink:
+        "https://portabase.io/docs/agent/troubleshooting/agent-connection",
+    };
+  }
+
+  if (msg.includes("timeout")) {
+    return {
+      title: "Timeout",
+      resolution:
+        "The agent is taking too long to respond. This could be due to high server load, network issues, or a large database.",
+      docLink: "https://portabase.io/docs/agent/troubleshooting/timeout",
+    };
+  }
+
+  return {
+    title: "Unexpected Execution Error",
+    resolution:
+      "An unexpected error occurred during execution. Please review the raw system logs or contact support if the issue persists.",
+    docLink: "https://discord.gg/Wgv7xZ8fWJ",
+  };
+};
+
+const getIconForKey = (key: string, value: any) => {
+  const isActualError =
+    key.toLowerCase().includes("error") &&
+    value !== null &&
+    String(value).toLowerCase() !== "null";
+
+  if (key.toLowerCase().includes("id"))
+    return <Hash className="w-3.5 h-3.5 text-muted-foreground" />;
+  if (key.toLowerCase().includes("host"))
+    return <Server className="w-3.5 h-3.5 text-muted-foreground" />;
+  if (isActualError)
+    return <AlertCircle className="w-3.5 h-3.5 text-destructive" />;
+  return <Database className="w-3.5 h-3.5 text-muted-foreground" />;
+};
+
+export const NotificationLogModal = ({
+  notificationLog,
+}: NotificationLogModalProps) => {
+  const [open, setOpen] = useState(false);
+
+  // TODO : to be fixed
+  // @ts-ignore
+  const payloadError = notificationLog.payload?.error;
+  const troubleshooting = getTroubleshootingForError(payloadError);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          variant="outline"
+          onClick={() => setOpen(true)}
+          className="relative"
+        >
+          <Eye className="w-4 h-4" />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-xl bg-background">
+        <DialogHeader>
+          <DialogTitle>Notification Details</DialogTitle>
+          <DialogDescription>Execution logs and payload data</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 mt-2 max-h-[70vh] overflow-y-auto px-1 pb-2">
+          <div className="relative border rounded-xl bg-card shadow-sm flex flex-col">
+            <div className="bg-primary/5 border-b px-4 py-2.5 flex items-center gap-2 rounded-t-xl">
+              <div className="p-1 bg-primary/10 rounded-md">
+                <Database className="w-4 h-4 text-primary" />
+              </div>
+              <span className="font-semibold text-sm text-primary">
+                Event Trigger
+              </span>
+            </div>
+            <div className="p-4 flex flex-col gap-4">
+              <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-1 sm:gap-4">
+                <span className="text-xs font-medium text-muted-foreground min-w-20 pt-0.5">
+                  Title
+                </span>
+                <span className="text-sm sm:text-right flex-1 wrap-break-words">
+                  {notificationLog.content.title}
+                </span>
+              </div>
+              <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-1 sm:gap-4">
+                <span className="text-xs font-medium text-muted-foreground min-w-20 pt-0.5">
+                  Message
+                </span>
+                <span className="text-sm sm:text-right flex-1 wrap-break-word text-muted-foreground">
+                  {notificationLog.content.message}
+                </span>
+              </div>
+            </div>
+            {notificationLog.payload && (
+            <div className="absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-primary rounded-full border-2 border-background z-10" />
+                )}
+          </div>
+
+          <div className="w-px h-6 bg-border mx-auto -my-4 relative z-0" />
+
+          {notificationLog.payload &&
+            Object.keys(notificationLog.payload).length > 0 && (
+              <div className="relative border rounded-xl bg-card shadow-sm flex flex-col">
+                <div className="absolute -top-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-primary rounded-full border-2 border-background z-10" />
+
+                <div className="bg-primary/5 border-b px-4 py-2.5 flex items-center justify-between rounded-t-xl">
+                  <div className="flex items-center gap-2">
+                    <div className="p-1 bg-primary/10 rounded-md">
+                      <Braces className="w-4 h-4 text-primary" />
                    </div>
+                    <span className="font-semibold text-sm text-primary">
+                      JSON Payload
+                    </span>
+                  </div>
+                </div>

-                    {notificationLog.payload && (
-                        <>
-                            <Separator className="mb-3" />
-                            <div className="text-sm font-mono bg-gray-100 dark:bg-gray-800 dark:text-gray-200 p-4 rounded-md overflow-auto">
-                                {JSON.stringify(notificationLog.payload, null, 2)}
-                            </div>
-                        </>
-                    )}
-                </DialogHeader>
-            </DialogContent>
-        </Dialog>
-    )
-}
+                <div className="flex flex-col">
+                  {Object.entries(notificationLog.payload).map(
+                    ([key, value], index, arr) => {
+                      const isActualError =
+                        key === "error" &&
+                        value !== null &&
+                        String(value).toLowerCase() !== "null";
+
+                      return (
+                        <div
+                          key={key}
+                          className={`flex flex-col sm:flex-row sm:items-center justify-between gap-2 px-4 py-3 hover:bg-muted/50 transition-colors ${
+                            index !== arr.length - 1
+                              ? "border-b border-border/50"
+                              : ""
+                          }`}
+                        >
+                          <div className="flex items-center gap-2 min-w-[150px]">
+                            {getIconForKey(key, value)}
+                            <span className="text-sm font-medium">{key}</span>
+                          </div>
+                          <div className="flex-1 sm:text-right">
+                            {isActualError ? (
+                              <span className="inline-flex items-center px-2 py-1 rounded-md bg-destructive/10 text-destructive text-xs font-mono break-all">
+                                {String(value)}
+                              </span>
+                            ) : (
+                              <span className="text-sm text-muted-foreground font-mono bg-muted px-2 py-1 rounded-md break-all">
+                                {String(value)}
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                      );
+                    },
+                  )}
+                </div>
+
+                {troubleshooting && (
+                  <div className="absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-primary rounded-full border-2 border-background z-10" />
+                )}
+              </div>
+            )}
+
+          {troubleshooting && (
+            <>
+              <div className="w-px h-6 bg-border mx-auto -my-4 relative z-0" />
+
+              <div className="relative border border-destructive/20 rounded-xl bg-gradient-to-b from-destructive/5 to-transparent shadow-sm flex flex-col">
+                <div className="absolute -top-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-destructive rounded-full border-2 border-background z-10" />
+
+                <div className="bg-destructive/10 border-b border-destructive/10 px-4 py-2.5 flex items-center justify-between rounded-t-xl">
+                  <div className="flex items-center gap-2">
+                    <div className="p-1 bg-destructive/20 rounded-md">
+                      <Sparkles className="w-4 h-4 text-destructive" />
+                    </div>
+                    <span className="font-semibold text-sm text-destructive">
+                      Suggested Resolution
+                    </span>
+                  </div>
+                </div>
+
+                <div className="p-4 flex flex-col gap-2">
+                  <h4 className="text-sm font-semibold text-foreground">
+                    {troubleshooting.title}
+                  </h4>
+                  <p className="text-sm text-muted-foreground leading-relaxed">
+                    {troubleshooting.resolution}
+                  </p>
+                  <div className="mt-2">
+                    <a
+                      href={troubleshooting.docLink}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="inline-flex items-center gap-1.5 text-xs font-semibold text-destructive hover:text-destructive/80 transition-colors"
+                    >
+                      Read the documentation{" "}
+                      <ExternalLink className="w-3.5 h-3.5" />
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};