feat: dashboard implemented

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;
@@ -1172,4 +1177,277 @@ button {
   .dashboard-grid {
     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 renderDashboard() {
+  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));
+
+  return `
+    <div class="editor-empty">
+      <div class="dashboard-content">
+        <h1 data-testid="editor-title">${escapeHtml(t("dashboard.title"))}</h1>
+        <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("")}
+            </div>
+          </div>
+        ` : ""}
+
+        ${tagCloudItems.length ? `
+          <div class="dashboard-section">
+            <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 (route === "dashboard") {
-    const dashboard = bootstrap.content.dashboard;
-    return `
-      <section class="editor-section">
-        <ul class="editor-list compact">
-          ${dashboard.summary_cards
-            .map((card) => `<li><strong>${escapeHtml(tText(card.label))}:</strong> ${escapeHtml(card.value)} <span>${escapeHtml(tText(card.detail))}</span></li>`)
-            .join("")}
-        </ul>
-      </section>
-      <section class="editor-section">
-        <h2>${escapeHtml(t("Workbench Notes"))}</h2>
-        <ul class="editor-list">
-          ${dashboard.checklist.map((entry) => `<li>${escapeHtml(tText(entry))}</li>`).join("")}
-        </ul>
-      </section>
-    `;
-  }
-
   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",
-            "subtitle": "Static shell bundle for direct inspection",
-            "summary_cards": [
-              { "label": "Posts", "value": "42", "detail": "Drafts, published, archive" }
+            "title": "dashboard.title",
+            "subtitle": "dashboard.subtitle",
+            "post_stats": {
+              "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": [
-              "Static bundle is valid HTML",
-              "Shell assets render without duplicated bootstrap code"
+            "tag_cloud_items": [
+              { "tag": "launch", "count": 12, "color": "#2962ff" },
+              { "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": [