feat: dashboard implemented

lib/bds/ui/dashboard.ex

@@ -0,0 +1,160 @@
+defmodule BDS.UI.Dashboard do
+  @moduledoc false
+
+  import Ecto.Query
+
+  alias BDS.Media.Media
+  alias BDS.Posts.Post
+  alias BDS.Repo
+  alias BDS.Tags.Tag
+
+  def snapshot(nil), do: empty_snapshot()
+
+  def snapshot(project_id) when is_binary(project_id) do
+    posts =
+      Repo.all(
+        from post in Post,
+          where: post.project_id == ^project_id,
+          select: %{
+            id: post.id,
+            title: post.title,
+            slug: post.slug,
+            status: post.status,
+            tags: post.tags,
+            categories: post.categories,
+            created_at: post.created_at,
+            updated_at: post.updated_at
+          }
+      )
+
+    media_items =
+      Repo.all(
+        from media in Media,
+          where: media.project_id == ^project_id,
+          select: %{mime_type: media.mime_type, size: media.size}
+      )
+
+    tag_colors =
+      Repo.all(
+        from tag in Tag,
+          where: tag.project_id == ^project_id,
+          select: %{name: tag.name, color: tag.color}
+      )
+      |> Enum.reduce(%{}, fn %{name: name, color: color}, acc ->
+        if blank?(color), do: acc, else: Map.put(acc, name, color)
+      end)
+
+    post_stats = post_stats(posts)
+    media_stats = media_stats(media_items)
+    tag_cloud_items = tag_cloud_items(posts, tag_colors)
+    category_counts = category_counts(posts)
+
+    %{
+      title: "dashboard.title",
+      subtitle: "dashboard.subtitle",
+      post_stats: post_stats,
+      media_stats: media_stats,
+      timeline_entries: timeline_entries(posts),
+      tag_cloud_items: tag_cloud_items,
+      category_counts: category_counts,
+      recent_posts: recent_posts(posts)
+    }
+  end
+
+  def empty_snapshot do
+    %{
+      title: "dashboard.title",
+      subtitle: "dashboard.subtitle",
+      post_stats: %{total_posts: 0, draft_count: 0, published_count: 0, archived_count: 0},
+      media_stats: %{media_count: 0, image_count: 0, total_bytes: 0},
+      timeline_entries: [],
+      tag_cloud_items: [],
+      category_counts: [],
+      recent_posts: []
+    }
+  end
+
+  defp post_stats(posts) do
+    Enum.reduce(posts, %{total_posts: 0, draft_count: 0, published_count: 0, archived_count: 0}, fn post, acc ->
+      acc
+      |> Map.update!(:total_posts, &(&1 + 1))
+      |> increment_status(post.status)
+    end)
+  end
+
+  defp media_stats(media_items) do
+    Enum.reduce(media_items, %{media_count: 0, image_count: 0, total_bytes: 0}, fn media, acc ->
+      acc
+      |> Map.update!(:media_count, &(&1 + 1))
+      |> Map.update!(:total_bytes, &(&1 + (media.size || 0)))
+      |> maybe_increment_image_count(media.mime_type)
+    end)
+  end
+
+  defp timeline_entries(posts) do
+    posts
+    |> Enum.reduce(%{}, fn post, acc ->
+      datetime = DateTime.from_unix!(post.created_at, :millisecond)
+      key = {datetime.year, datetime.month}
+      Map.update(acc, key, 1, &(&1 + 1))
+    end)
+    |> Enum.map(fn {{year, month}, count} -> %{year: year, month: month, count: count} end)
+    |> Enum.sort_by(&{&1.year, &1.month})
+    |> Enum.take(-12)
+  end
+
+  defp tag_cloud_items(posts, tag_colors) do
+    posts
+    |> Enum.flat_map(&normalize_terms(&1.tags))
+    |> Enum.frequencies()
+    |> Enum.map(fn {tag, count} -> %{tag: tag, count: count, color: Map.get(tag_colors, tag)} end)
+    |> Enum.sort_by(fn %{tag: tag, count: count} -> {-count, String.downcase(tag)} end)
+  end
+
+  defp category_counts(posts) do
+    posts
+    |> Enum.flat_map(&normalize_terms(&1.categories))
+    |> Enum.frequencies()
+    |> Enum.map(fn {category, count} -> %{category: category, count: count} end)
+    |> Enum.sort_by(fn %{category: category, count: count} -> {-count, String.downcase(category)} end)
+  end
+
+  defp recent_posts(posts) do
+    posts
+    |> Enum.sort_by(& &1.updated_at, :desc)
+    |> Enum.take(5)
+    |> Enum.map(fn post ->
+      %{
+        id: post.id,
+        title: display_title(post),
+        status: Atom.to_string(post.status),
+        updated_at: post.updated_at
+      }
+    end)
+  end
+
+  defp normalize_terms(values) do
+    values
+    |> Kernel.||([])
+    |> Enum.map(&to_string/1)
+    |> Enum.map(&String.trim/1)
+    |> Enum.reject(&(&1 == ""))
+  end
+
+  defp display_title(post) do
+    if blank?(post.title), do: post.slug || "", else: post.title
+  end
+
+  defp increment_status(counts, :draft), do: Map.update!(counts, :draft_count, &(&1 + 1))
+  defp increment_status(counts, :published), do: Map.update!(counts, :published_count, &(&1 + 1))
+  defp increment_status(counts, :archived), do: Map.update!(counts, :archived_count, &(&1 + 1))
+  defp increment_status(counts, _status), do: counts
+
+  defp maybe_increment_image_count(counts, mime_type) when is_binary(mime_type) do
+    if String.starts_with?(mime_type, "image/"), do: Map.update!(counts, :image_count, &(&1 + 1)), else: counts
+  end
+
+  defp maybe_increment_image_count(counts, _mime_type), do: counts
+
+  defp blank?(value), do: value in [nil, ""]
+end

lib/bds/ui/shell_page.ex

@@ -3,6 +3,7 @@ defmodule BDS.UI.ShellPage do
 
   alias BDS.I18n
   alias BDS.Projects
+  alias BDS.UI.Dashboard
   alias BDS.UI.MenuBar
   alias BDS.UI.Registry
   alias BDS.UI.Session
@@ -54,6 +55,8 @@ defmodule BDS.UI.ShellPage do
     workbench = Workbench.new()
     task_status = BDS.Tasks.status_snapshot()
     ui_language = I18n.current_ui_locale()
+    projects = project_snapshot()
+    dashboard = dashboard_content(projects.active_project_id)
 
     %{
       title: Application.get_env(:bds, :desktop)[:title] || "Blogging Desktop Server",
@@ -77,19 +80,19 @@ defmodule BDS.UI.ShellPage do
         default_sidebar_view: Atom.to_string(Registry.default_sidebar_view())
       },
       menu_groups: Enum.map(MenuBar.default_groups(), &encode_menu_group/1),
-      projects: project_snapshot(),
+      projects: projects,
       session: Session.serialize(workbench),
       task_status: task_status,
       content: %{
         sidebar: sidebar_content(),
-        dashboard: dashboard_content(task_status),
+        dashboard: dashboard,
         assistant_cards: assistant_cards(),
         editor_meta: editor_meta(task_status)
       },
       status:
         Workbench.status_bar(workbench,
-          post_count: 42,
+          post_count: dashboard.post_stats.total_posts,
-          media_count: 18,
+          media_count: dashboard.media_stats.media_count,
           theme_badge: "desktop-shell",
           ui_language: ui_language,
           offline_mode: true,
@@ -227,25 +230,15 @@ defmodule BDS.UI.ShellPage do
     %{title: title, subtitle: subtitle, sections: [%{title: title, items: items}]}
   end
 
-  defp dashboard_content(task_status) do
+  defp dashboard_content(project_id) do
-    %{
+    Dashboard.snapshot(project_id)
-      title: "Dashboard",
+  rescue
-      subtitle: "Desktop workbench shell wired through Elixir",
+    error in [Exqlite.Error, DBConnection.OwnershipError] ->
-      summary_cards: [
+      if match?(%Exqlite.Error{}, error) and not String.contains?(Exception.message(error), "no such table") do
-        %{label: "Posts", value: "42", detail: "Across draft, published, and archive"},
+        reraise error, __STACKTRACE__
-        %{label: "Media", value: "18", detail: "Images and documents indexed"},
+      end
-        %{
+
-          label: "Tasks",
+      Dashboard.empty_snapshot()
-          value: Integer.to_string(task_status.active_count),
-          detail: task_summary_detail(task_status)
-        }
-      ],
-      checklist: [
-        "Native menu groups mirror the old application shell",
-        "Sidebar, tabs, panel, and assistant panes are inspectable DOM regions",
-        "Automation can boot the shell in a separate process and capture screenshots"
-      ]
-    }
   end
 
   defp assistant_cards do
@@ -266,18 +259,6 @@ defmodule BDS.UI.ShellPage do
     }
   end
 
-  defp task_summary_detail(%{active_count: 0}), do: "No active background tasks"
-
-  defp task_summary_detail(%{running_count: running, pending_count: pending}) do
-    segments = []
-    segments = if running > 0, do: ["#{running} running" | segments], else: segments
-    segments = if pending > 0, do: ["#{pending} queued" | segments], else: segments
-
-    segments
-    |> Enum.reverse()
-    |> Enum.join(", ")
-  end
-
   defp normalize_view_label(:chat, _label), do: "Chat"
   defp normalize_view_label(:git, _label), do: "Git"
   defp normalize_view_label(_id, label), do: label

priv/i18n/locales/de.json

@@ -66,6 +66,26 @@
   "Command failed with HTTP %{status}": "Befehl mit HTTP %{status} fehlgeschlagen",
   "Create Project": "Projekt erstellen",
   "Dashboard": "Instrumententafel",
+  "dashboard.postCount.one": "%{count} Beitrag",
+  "dashboard.postCount.other": "%{count} Beiträge",
+  "dashboard.section.categories": "Kategorien",
+  "dashboard.section.postsOverTime": "Beiträge im Zeitverlauf",
+  "dashboard.section.recentlyUpdated": "Kürzlich aktualisiert",
+  "dashboard.section.tags": "Schlagwörter",
+  "dashboard.stats.archived": "%{count} archiviert",
+  "dashboard.stats.categories": "%{count} Kategorien",
+  "dashboard.stats.drafts": "%{count} Entwürfe",
+  "dashboard.stats.images": "%{count} Bilder",
+  "dashboard.stats.mediaFiles": "Mediendateien",
+  "dashboard.stats.published": "%{count} veröffentlicht",
+  "dashboard.stats.tags": "Schlagwörter",
+  "dashboard.stats.totalPosts": "Beiträge gesamt",
+  "dashboard.status.archived": "Archiviert",
+  "dashboard.status.draft": "Entwurf",
+  "dashboard.status.published": "Veröffentlicht",
+  "dashboard.subtitle": "Überblick über deine Blog-Datenbank",
+  "dashboard.tagCloud.more": "+%{count} weitere",
+  "dashboard.title": "Übersicht",
   "Desktop Runtime": "Desktop-Laufzeit",
   "Desktop workbench content routed through the Elixir shell.": "Desktop-Arbeitsbereichsinhalte werden durch die Elixir-Shell geleitet.",
   "Desktop workbench shell wired through Elixir": "Desktop-Workbench-Shell über Elixir verdrahtet",

priv/i18n/locales/en.json

@@ -66,6 +66,26 @@
   "Command failed with HTTP %{status}": "Command failed with HTTP %{status}",
   "Create Project": "Create Project",
   "Dashboard": "Dashboard",
+  "dashboard.postCount.one": "%{count} post",
+  "dashboard.postCount.other": "%{count} posts",
+  "dashboard.section.categories": "Categories",
+  "dashboard.section.postsOverTime": "Posts Over Time",
+  "dashboard.section.recentlyUpdated": "Recently Updated",
+  "dashboard.section.tags": "Tags",
+  "dashboard.stats.archived": "%{count} archived",
+  "dashboard.stats.categories": "%{count} categories",
+  "dashboard.stats.drafts": "%{count} drafts",
+  "dashboard.stats.images": "%{count} images",
+  "dashboard.stats.mediaFiles": "Media Files",
+  "dashboard.stats.published": "%{count} published",
+  "dashboard.stats.tags": "Tags",
+  "dashboard.stats.totalPosts": "Total Posts",
+  "dashboard.status.archived": "Archived",
+  "dashboard.status.draft": "Draft",
+  "dashboard.status.published": "Published",
+  "dashboard.subtitle": "Overview of your blog database",
+  "dashboard.tagCloud.more": "+%{count} more",
+  "dashboard.title": "Dashboard",
   "Desktop Runtime": "Desktop Runtime",
   "Desktop workbench content routed through the Elixir shell.": "Desktop workbench content routed through the Elixir shell.",
   "Desktop workbench shell wired through Elixir": "Desktop workbench shell wired through Elixir",

priv/i18n/locales/es.json

@@ -66,6 +66,26 @@
   "Command failed with HTTP %{status}": "El comando falló con HTTP %{status}",
   "Create Project": "Crear proyecto",
   "Dashboard": "Panel",
+  "dashboard.postCount.one": "%{count} entrada",
+  "dashboard.postCount.other": "%{count} entradas",
+  "dashboard.section.categories": "Categorías",
+  "dashboard.section.postsOverTime": "Entradas a lo largo del tiempo",
+  "dashboard.section.recentlyUpdated": "Actualizadas recientemente",
+  "dashboard.section.tags": "Etiquetas",
+  "dashboard.stats.archived": "%{count} archivadas",
+  "dashboard.stats.categories": "%{count} categorías",
+  "dashboard.stats.drafts": "%{count} borradores",
+  "dashboard.stats.images": "%{count} imágenes",
+  "dashboard.stats.mediaFiles": "Archivos multimedia",
+  "dashboard.stats.published": "%{count} publicadas",
+  "dashboard.stats.tags": "Etiquetas",
+  "dashboard.stats.totalPosts": "Entradas totales",
+  "dashboard.status.archived": "Archivada",
+  "dashboard.status.draft": "Borrador",
+  "dashboard.status.published": "Publicada",
+  "dashboard.subtitle": "Resumen de la base de datos de tu blog",
+  "dashboard.tagCloud.more": "+%{count} más",
+  "dashboard.title": "Panel",
   "Desktop Runtime": "Entorno de escritorio",
   "Desktop workbench content routed through the Elixir shell.": "El contenido del área de trabajo de escritorio se enruta a través del shell de Elixir.",
   "Desktop workbench shell wired through Elixir": "Shell del área de trabajo de escritorio conectado mediante Elixir",

priv/i18n/locales/fr.json

@@ -66,6 +66,26 @@
   "Command failed with HTTP %{status}": "La commande a échoué avec HTTP %{status}",
   "Create Project": "Créer un projet",
   "Dashboard": "Tableau de bord",
+  "dashboard.postCount.one": "%{count} article",
+  "dashboard.postCount.other": "%{count} articles",
+  "dashboard.section.categories": "Catégories",
+  "dashboard.section.postsOverTime": "Articles dans le temps",
+  "dashboard.section.recentlyUpdated": "Récemment mis à jour",
+  "dashboard.section.tags": "Étiquettes",
+  "dashboard.stats.archived": "%{count} archivés",
+  "dashboard.stats.categories": "%{count} catégories",
+  "dashboard.stats.drafts": "%{count} brouillons",
+  "dashboard.stats.images": "%{count} images",
+  "dashboard.stats.mediaFiles": "Fichiers média",
+  "dashboard.stats.published": "%{count} publiés",
+  "dashboard.stats.tags": "Étiquettes",
+  "dashboard.stats.totalPosts": "Articles au total",
+  "dashboard.status.archived": "Archivé",
+  "dashboard.status.draft": "Brouillon",
+  "dashboard.status.published": "Publié",
+  "dashboard.subtitle": "Aperçu de la base de données de votre blog",
+  "dashboard.tagCloud.more": "+%{count} de plus",
+  "dashboard.title": "Tableau de bord",
   "Desktop Runtime": "Exécution bureau",
   "Desktop workbench content routed through the Elixir shell.": "Le contenu de l’atelier bureau est acheminé via le shell Elixir.",
   "Desktop workbench shell wired through Elixir": "Shell d’atelier bureau câblé via Elixir",

priv/i18n/locales/it.json

@@ -66,6 +66,26 @@
   "Command failed with HTTP %{status}": "Comando non riuscito con HTTP %{status}",
   "Create Project": "Crea progetto",
   "Dashboard": "Dashboard",
+  "dashboard.postCount.one": "%{count} post",
+  "dashboard.postCount.other": "%{count} post",
+  "dashboard.section.categories": "Categorie",
+  "dashboard.section.postsOverTime": "Post nel tempo",
+  "dashboard.section.recentlyUpdated": "Aggiornati di recente",
+  "dashboard.section.tags": "Tag",
+  "dashboard.stats.archived": "%{count} archiviati",
+  "dashboard.stats.categories": "%{count} categorie",
+  "dashboard.stats.drafts": "%{count} bozze",
+  "dashboard.stats.images": "%{count} immagini",
+  "dashboard.stats.mediaFiles": "File multimediali",
+  "dashboard.stats.published": "%{count} pubblicati",
+  "dashboard.stats.tags": "Tag",
+  "dashboard.stats.totalPosts": "Post totali",
+  "dashboard.status.archived": "Archiviato",
+  "dashboard.status.draft": "Bozza",
+  "dashboard.status.published": "Pubblicato",
+  "dashboard.subtitle": "Panoramica del database del tuo blog",
+  "dashboard.tagCloud.more": "+%{count} in più",
+  "dashboard.title": "Dashboard",
   "Desktop Runtime": "Runtime desktop",
   "Desktop workbench content routed through the Elixir shell.": "I contenuti del banco di lavoro desktop vengono instradati tramite la shell Elixir.",
   "Desktop workbench shell wired through Elixir": "Shell del banco di lavoro desktop collegata tramite Elixir",

priv/ui/app.css

@@ -1,5 +1,6 @@
 :root {
   --vscode-editor-background: #1e1e1e;
+  --vscode-editor-foreground: #cccccc;
   --vscode-sideBar-background: #252526;
   --vscode-activityBar-background: #333333;
   --vscode-panel-background: #1e1e1e;
@@ -21,11 +22,15 @@
   --vscode-sideBar-border: #80808059;
   --vscode-tab-border: #252526;
   --vscode-focusBorder: #007fd4;
+  --vscode-input-background: rgba(255, 255, 255, 0.06);
+  --vscode-input-border: rgba(255, 255, 255, 0.12);
   --vscode-list-hoverBackground: #2a2d2e;
   --vscode-list-activeSelectionBackground: #094771;
   --vscode-list-activeSelectionForeground: #ffffff;
   --vscode-activityBarBadge-background: #007acc;
   --vscode-activityBarBadge-foreground: #ffffff;
+  --vscode-testing-iconPassed: #73c991;
+  --vscode-editorWarning-foreground: #cca700;
   --sidebar-width: 280px;
   --assistant-width: 360px;
   color-scheme: dark;
@@ -1173,3 +1178,276 @@ button {
     grid-template-columns: 1fr;
   }
 }
+
+.text-muted {
+  color: var(--vscode-descriptionForeground);
+}
+
+.editor-empty {
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  background-color: var(--vscode-editor-background);
+  overflow-y: auto;
+  padding: 40px 20px;
+}
+
+.dashboard-content {
+  max-width: 720px;
+  width: 100%;
+}
+
+.dashboard-content h1 {
+  font-size: 24px;
+  font-weight: 400;
+  margin: 0 0 4px;
+  color: var(--vscode-editor-foreground);
+}
+
+.dashboard-content > .text-muted {
+  margin-bottom: 24px;
+  display: block;
+}
+
+.dashboard-stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.stat-card {
+  padding: 16px;
+  background-color: var(--vscode-sideBar-background);
+  border-radius: 6px;
+}
+
+.stat-number {
+  font-size: 32px;
+  font-weight: 600;
+  color: var(--vscode-editor-foreground);
+  line-height: 1;
+  margin-bottom: 4px;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: var(--vscode-descriptionForeground);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 10px;
+}
+
+.stat-breakdown {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.stat-tag {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 3px;
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-descriptionForeground);
+}
+
+.stat-published {
+  color: var(--vscode-testing-iconPassed);
+}
+
+.stat-draft {
+  color: var(--vscode-editorWarning-foreground);
+}
+
+.stat-archived {
+  color: var(--vscode-descriptionForeground);
+}
+
+.dashboard-section {
+  background-color: var(--vscode-sideBar-background);
+  border-radius: 6px;
+  padding: 16px;
+  margin-bottom: 12px;
+}
+
+.dashboard-section h4 {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--vscode-descriptionForeground);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin: 0 0 12px;
+}
+
+.timeline-chart {
+  display: flex;
+  align-items: flex-end;
+  gap: 4px;
+  height: 100px;
+}
+
+.timeline-bar-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+}
+
+.timeline-bar {
+  width: 100%;
+  max-width: 40px;
+  background-color: var(--vscode-activityBarBadge-background);
+  border-radius: 3px 3px 0 0;
+  margin-top: auto;
+  min-height: 4px;
+  position: relative;
+  transition: opacity 0.15s;
+}
+
+.timeline-bar:hover {
+  opacity: 0.8;
+}
+
+.timeline-bar-count {
+  position: absolute;
+  top: -16px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 10px;
+  color: var(--vscode-descriptionForeground);
+}
+
+.timeline-bar-label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-size: 9px;
+  color: var(--vscode-descriptionForeground);
+  margin-top: 4px;
+  line-height: 1.15;
+}
+
+.timeline-bar-label-month {
+  white-space: nowrap;
+}
+
+.timeline-bar-label-year {
+  font-size: 8px;
+}
+
+.tag-cloud {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 10px;
+  align-items: baseline;
+  line-height: 1.6;
+}
+
+.dashboard-tag {
+  padding: 2px 8px;
+  border-radius: 10px;
+  background-color: var(--vscode-input-background);
+  color: var(--vscode-editor-foreground);
+  cursor: default;
+  transition: opacity 0.15s;
+  white-space: nowrap;
+}
+
+.dashboard-tag:hover {
+  opacity: 0.75;
+}
+
+.dashboard-tag.has-color {
+  border-radius: 12px;
+}
+
+.dashboard-tag.has-color:hover {
+  opacity: 0.85;
+}
+
+.tag-cloud-more {
+  font-size: 11px;
+}
+
+.tag-count {
+  font-size: 10px;
+  opacity: 0.5;
+  margin-left: 2px;
+}
+
+.dashboard-category {
+  font-size: 12px;
+  border: 1px solid var(--vscode-input-border);
+}
+
+.recent-posts-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.recent-post-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  width: 100%;
+  border: none;
+  background: transparent;
+  text-align: left;
+  color: inherit;
+}
+
+.recent-post-item:hover {
+  background-color: var(--vscode-list-hoverBackground);
+}
+
+.recent-post-title {
+  flex: 1;
+  color: var(--vscode-editor-foreground);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.recent-post-status {
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: 3px;
+  background-color: var(--vscode-input-background);
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+}
+
+.recent-post-status.status-published {
+  color: var(--vscode-testing-iconPassed);
+}
+
+.recent-post-status.status-draft {
+  color: var(--vscode-editorWarning-foreground);
+}
+
+.recent-post-status.status-archived {
+  color: var(--vscode-descriptionForeground);
+}
+
+.recent-post-date {
+  color: var(--vscode-descriptionForeground);
+  white-space: nowrap;
+}
+
+@media (max-width: 820px) {
+  .dashboard-stats {
+    grid-template-columns: 1fr;
+  }
+
+  .recent-post-item {
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+}

priv/ui/app.js

@@ -214,9 +214,15 @@ function renderTab(tab) {
 
 function renderEditor() {
   const route = currentRoute();
-  const meta = currentEditorMeta();
   const node = root.querySelector(".editor-shell");
 
+  if (route === "dashboard") {
+    node.innerHTML = renderDashboard();
+    return;
+  }
+
+  const meta = currentEditorMeta();
+
   node.innerHTML = `
     <div class="editor-frame">
       <section class="editor-main">
@@ -241,28 +247,148 @@ function renderEditor() {
   `;
 }
 
-function renderEditorBody(route) {
+function renderDashboard() {
-  const meta = currentTabMeta();
+  const dashboard = bootstrap.content.dashboard || {};
+  const postStats = dashboard.post_stats || {};
+  const mediaStats = dashboard.media_stats || {};
+  const timelineEntries = Array.isArray(dashboard.timeline_entries) ? dashboard.timeline_entries : [];
+  const tagCloudItems = buildDashboardTagCloudItems(dashboard.tag_cloud_items || []);
+  const categoryCounts = Array.isArray(dashboard.category_counts) ? dashboard.category_counts : [];
+  const recentPosts = Array.isArray(dashboard.recent_posts) ? dashboard.recent_posts : [];
+  const meta = currentEditorMeta();
+  const maxCount = Math.max(1, ...timelineEntries.map((entry) => Number(entry.count) || 0));
 
-  if (route === "dashboard") {
-    const dashboard = bootstrap.content.dashboard;
   return `
-      <section class="editor-section">
+    <div class="editor-empty">
-        <ul class="editor-list compact">
+      <div class="dashboard-content">
-          ${dashboard.summary_cards
+        <h1 data-testid="editor-title">${escapeHtml(t("dashboard.title"))}</h1>
-            .map((card) => `<li><strong>${escapeHtml(tText(card.label))}:</strong> ${escapeHtml(card.value)} <span>${escapeHtml(tText(card.detail))}</span></li>`)
+        <p class="text-muted">${escapeHtml(t("dashboard.subtitle"))}</p>
+
+        <div class="dashboard-stats">
+          <div class="stat-card">
+            <div class="stat-number">${escapeHtml(String(postStats.total_posts || 0))}</div>
+            <div class="stat-label">${escapeHtml(t("dashboard.stats.totalPosts"))}</div>
+            <div class="stat-breakdown">
+              <span class="stat-tag stat-published">${escapeHtml(t("dashboard.stats.published", { count: postStats.published_count || 0 }))}</span>
+              <span class="stat-tag stat-draft">${escapeHtml(t("dashboard.stats.drafts", { count: postStats.draft_count || 0 }))}</span>
+              ${(postStats.archived_count || 0) > 0 ? `<span class="stat-tag stat-archived">${escapeHtml(t("dashboard.stats.archived", { count: postStats.archived_count || 0 }))}</span>` : ""}
+            </div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-number">${escapeHtml(String(mediaStats.media_count || 0))}</div>
+            <div class="stat-label">${escapeHtml(t("dashboard.stats.mediaFiles"))}</div>
+            <div class="stat-breakdown">
+              <span class="stat-tag">${escapeHtml(t("dashboard.stats.images", { count: mediaStats.image_count || 0 }))}</span>
+              <span class="stat-tag">${escapeHtml(formatBytes(mediaStats.total_bytes || 0))}</span>
+            </div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-number">${escapeHtml(String((dashboard.tag_cloud_items || []).length))}</div>
+            <div class="stat-label">${escapeHtml(t("dashboard.stats.tags"))}</div>
+            <div class="stat-breakdown">
+              <span class="stat-tag">${escapeHtml(t("dashboard.stats.categories", { count: categoryCounts.length }))}</span>
+            </div>
+          </div>
+        </div>
+
+        ${timelineEntries.length ? `
+          <div class="dashboard-section">
+            <h4>${escapeHtml(t("dashboard.section.postsOverTime"))}</h4>
+            <div class="timeline-chart">
+              ${timelineEntries
+                .map(
+                  (entry) => `
+                    <div class="timeline-bar-container">
+                      <div class="timeline-bar" style="height: ${Math.max(4, ((Number(entry.count) || 0) / maxCount) * 100)}%">
+                        <span class="timeline-bar-count">${escapeHtml(String(entry.count || 0))}</span>
+                      </div>
+                      <div class="timeline-bar-label">
+                        <span class="timeline-bar-label-month">${escapeHtml(formatDashboardMonth(entry.year, entry.month))}</span>
+                        <span class="timeline-bar-label-year">${escapeHtml(String(entry.year || ""))}</span>
+                      </div>
+                    </div>
+                  `
+                )
                 .join("")}
-        </ul>
+            </div>
-      </section>
+          </div>
-      <section class="editor-section">
+        ` : ""}
-        <h2>${escapeHtml(t("Workbench Notes"))}</h2>
+
-        <ul class="editor-list">
+        ${tagCloudItems.length ? `
-          ${dashboard.checklist.map((entry) => `<li>${escapeHtml(tText(entry))}</li>`).join("")}
+          <div class="dashboard-section">
-        </ul>
+            <h4>${escapeHtml(t("dashboard.section.tags"))}</h4>
+            <div class="tag-cloud">
+              ${tagCloudItems
+                .map((item) => `<span class="dashboard-tag${item.color ? " has-color" : ""}" style="${escapeHtmlAttribute(renderDashboardTagStyle(item))}" title="${escapeHtmlAttribute(dashboardPostCountLabel(item.count))}">${escapeHtml(item.tag)}</span>`)
+                .join("")}
+              ${(dashboard.tag_cloud_items || []).length > 40 ? `<span class="text-muted tag-cloud-more">${escapeHtml(t("dashboard.tagCloud.more", { count: (dashboard.tag_cloud_items || []).length - 40 }))}</span>` : ""}
+            </div>
+          </div>
+        ` : ""}
+
+        ${categoryCounts.length ? `
+          <div class="dashboard-section">
+            <h4>${escapeHtml(t("dashboard.section.categories"))}</h4>
+            <div class="tag-cloud">
+              ${categoryCounts
+                .map(
+                  (category) => `
+                    <span class="dashboard-tag dashboard-category" title="${escapeHtmlAttribute(dashboardPostCountLabel(category.count || 0))}">
+                      ${escapeHtml(category.category || "")}
+                      <span class="tag-count">${escapeHtml(String(category.count || 0))}</span>
+                    </span>
+                  `
+                )
+                .join("")}
+            </div>
+          </div>
+        ` : ""}
+
+        ${recentPosts.length ? `
+          <div class="dashboard-section">
+            <h4>${escapeHtml(t("dashboard.section.recentlyUpdated"))}</h4>
+            <div class="recent-posts-list">
+              ${recentPosts
+                .map(
+                  (post) => `
+                    <button
+                      class="recent-post-item"
+                      data-open-tab="${escapeHtmlAttribute(post.id || "") }"
+                      data-open-route="post"
+                      data-open-title="${escapeHtmlAttribute(post.title || "") }"
+                      type="button"
+                    >
+                      <span class="recent-post-title">${escapeHtml(post.title || "")}</span>
+                      <span class="recent-post-status status-${escapeHtmlAttribute(post.status || "draft")}">${escapeHtml(dashboardStatusLabel(post.status || "draft"))}</span>
+                      <span class="recent-post-date">${escapeHtml(formatDashboardDate(post.updated_at))}</span>
+                    </button>
+                  `
+                )
+                .join("")}
+            </div>
+          </div>
+        ` : ""}
+
+        <div class="dashboard-inspector-meta" hidden>
+          ${meta
+            .map(
+              (item) => `
+                <section class="editor-meta-row">
+                  <strong data-testid="editor-meta-label">${escapeHtml(tText(item.label))}</strong>
+                  <span>${escapeHtml(tText(item.value))}</span>
                 </section>
+              `
+            )
+            .join("")}
+        </div>
+      </div>
+    </div>
   `;
 }
 
+function renderEditorBody(route) {
+  const meta = currentTabMeta();
+
   if (meta?.payload) {
     return renderCommandPayload(route, meta.payload);
   }
@@ -1588,6 +1714,114 @@ function statusLabel(status) {
   }
 }
 
+function buildDashboardTagCloudItems(items) {
+  if (!Array.isArray(items) || !items.length) {
+    return [];
+  }
+
+  const topItems = items
+    .slice()
+    .sort((left, right) => (Number(right.count) || 0) - (Number(left.count) || 0))
+    .slice(0, 40);
+
+  const counts = topItems.map((item) => Number(item.count) || 0);
+  const maxCount = Math.max(1, ...counts);
+  const minCount = Math.min(...counts);
+  const range = Math.max(1, maxCount - minCount);
+
+  return topItems
+    .map((item) => ({
+      ...item,
+      color: normalizeDashboardTagColor(item.color),
+      fontSize: 11 + (((Number(item.count) || 0) - minCount) / range) * 11,
+    }))
+    .sort((left, right) => String(left.tag || "").localeCompare(String(right.tag || "")));
+}
+
+function dashboardPostCountLabel(count) {
+  const normalizedCount = Number(count) || 0;
+  return t(normalizedCount === 1 ? "dashboard.postCount.one" : "dashboard.postCount.other", { count: normalizedCount });
+}
+
+function dashboardStatusLabel(status) {
+  const keys = {
+    draft: "dashboard.status.draft",
+    published: "dashboard.status.published",
+    archived: "dashboard.status.archived",
+  };
+
+  return keys[status] ? t(keys[status]) : tText(titleCase(status || "draft"));
+}
+
+function formatDashboardMonth(year, month) {
+  return new Intl.DateTimeFormat(formatLocaleFor(state.uiLanguage), { month: "short" }).format(new Date(year, (month || 1) - 1, 1));
+}
+
+function formatDashboardDate(timestamp) {
+  if (!timestamp) {
+    return "";
+  }
+
+  return new Intl.DateTimeFormat(formatLocaleFor(state.uiLanguage)).format(new Date(timestamp));
+}
+
+function formatLocaleFor(language) {
+  const locales = {
+    de: "de-DE",
+    en: "en-US",
+    es: "es-ES",
+    fr: "fr-FR",
+    it: "it-IT",
+  };
+
+  return locales[language] || locales.en;
+}
+
+function formatBytes(bytes) {
+  const normalizedBytes = Number(bytes) || 0;
+
+  if (normalizedBytes === 0) {
+    return "0 B";
+  }
+
+  const units = ["B", "KB", "MB", "GB"];
+  const unitIndex = Math.min(Math.floor(Math.log(normalizedBytes) / Math.log(1024)), units.length - 1);
+  const value = normalizedBytes / Math.pow(1024, unitIndex);
+  return `${value.toFixed(value >= 10 || unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`;
+}
+
+function renderDashboardTagStyle(item) {
+  const declarations = [`font-size: ${(item.fontSize || 11).toFixed(1)}px;`];
+
+  if (item.color) {
+    declarations.push(`background-color: ${item.color};`);
+    declarations.push(`color: ${dashboardContrastColor(item.color)};`);
+  }
+
+  return declarations.join(" ");
+}
+
+function normalizeDashboardTagColor(color) {
+  if (typeof color !== "string") {
+    return null;
+  }
+
+  const trimmed = color.trim();
+  return /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(trimmed) ? trimmed : null;
+}
+
+function dashboardContrastColor(hexColor) {
+  const normalized = hexColor.length === 4
+    ? `#${hexColor[1]}${hexColor[1]}${hexColor[2]}${hexColor[2]}${hexColor[3]}${hexColor[3]}`
+    : hexColor;
+
+  const red = Number.parseInt(normalized.slice(1, 3), 16);
+  const green = Number.parseInt(normalized.slice(3, 5), 16);
+  const blue = Number.parseInt(normalized.slice(5, 7), 16);
+  const luminance = (red * 299 + green * 587 + blue * 114) / 1000;
+  return luminance >= 140 ? "#111111" : "#f5f5f5";
+}
+
 function escapeHtml(value) {
   return String(value)
     .replaceAll("&", "&amp;")

priv/ui/index.html

@@ -100,14 +100,39 @@
             }
           },
           "dashboard": {
-            "title": "Dashboard",
+            "title": "dashboard.title",
-            "subtitle": "Static shell bundle for direct inspection",
+            "subtitle": "dashboard.subtitle",
-            "summary_cards": [
+            "post_stats": {
-              { "label": "Posts", "value": "42", "detail": "Drafts, published, archive" }
+              "total_posts": 42,
+              "draft_count": 18,
+              "published_count": 21,
+              "archived_count": 3
+            },
+            "media_stats": {
+              "media_count": 18,
+              "image_count": 15,
+              "total_bytes": 12884902
+            },
+            "timeline_entries": [
+              { "year": 2025, "month": 11, "count": 2 },
+              { "year": 2025, "month": 12, "count": 3 },
+              { "year": 2026, "month": 1, "count": 5 },
+              { "year": 2026, "month": 2, "count": 7 },
+              { "year": 2026, "month": 3, "count": 9 },
+              { "year": 2026, "month": 4, "count": 6 }
             ],
-            "checklist": [
+            "tag_cloud_items": [
-              "Static bundle is valid HTML",
+              { "tag": "launch", "count": 12, "color": "#2962ff" },
-              "Shell assets render without duplicated bootstrap code"
+              { "tag": "writing", "count": 7, "color": "#00897b" },
+              { "tag": "elixir", "count": 5, "color": "#e65100" }
+            ],
+            "category_counts": [
+              { "category": "notes", "count": 14 },
+              { "category": "projects", "count": 8 }
+            ],
+            "recent_posts": [
+              { "id": "post-welcome", "title": "Welcome to bDS2", "status": "draft", "updated_at": 1774972800000 },
+              { "id": "post-roadmap", "title": "Roadmap", "status": "published", "updated_at": 1774540800000 }
             ]
           },
           "assistant_cards": [

test/bds/ui/shell_test.exs

@@ -136,6 +136,29 @@ defmodule BDS.UI.ShellTest do
     assert html =~ ~s("Assistant":"Assistent")
   end
 
+  test "shell bootstrap and static bundle expose the old dashboard sections" do
+    html = ShellPage.render()
+    css = File.read!("/Users/gb/Projects/bDS2/priv/ui/app.css")
+    js = File.read!("/Users/gb/Projects/bDS2/priv/ui/app.js")
+
+    assert html =~ ~s("timeline_entries")
+    assert html =~ ~s("tag_cloud_items")
+    assert html =~ ~s("category_counts")
+    assert html =~ ~s("recent_posts")
+
+    assert js =~ "dashboard-content"
+    assert js =~ "dashboard-stats"
+    assert js =~ "timeline-chart"
+    assert js =~ "tag-cloud"
+    assert js =~ "recent-posts-list"
+
+    assert css =~ ".dashboard-content"
+    assert css =~ ".dashboard-stats"
+    assert css =~ ".timeline-chart"
+    assert css =~ ".tag-cloud"
+    assert css =~ ".recent-posts-list"
+  end
+
   test "static shell bundle exists for direct browser inspection" do
     assert File.exists?("/Users/gb/Projects/bDS2/priv/ui/index.html")
     assert File.exists?("/Users/gb/Projects/bDS2/priv/ui/app.css")