@work-graph/cli 0.2.6 → 0.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@work-graph/cli",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "Work Graph CLI — install local agent work tracking, BVC work items and backlog UI in any project",
   "type": "module",
   "bin": {

package/vendor/src/publicSiteServer.mjs

@@ -88,6 +88,43 @@ function renderNav(locale, theme) {
   </nav>`;
 }
 
+const SCREENSHOTS = [
+  {
+    src: '/assets/img/work-graph-kanban-board-light.png',
+    title: { en: 'Kanban board', ru: 'Доска задач' },
+    body: { en: 'Local backlog columns with BVC work items and agent ownership.', ru: 'Локальная доска с BVC-задачами и владельцами.' },
+  },
+  {
+    src: '/assets/img/work-graph-analytics-list.png',
+    title: { en: 'Analytics list', ru: 'Аналитика' },
+    body: { en: 'Decision and research records connected to implementation work.', ru: 'Решения и исследования, связанные с задачами реализации.' },
+  },
+  {
+    src: '/assets/img/work-graph-task-drawer.png',
+    title: { en: 'Task contract drawer', ru: 'Контракт задачи' },
+    body: { en: 'Basis, Vector, Goal, analysis, decisions and evidence in one drawer.', ru: 'Базис, Вектор, Цель, анализ, решения и evidence в одной панели.' },
+  },
+  {
+    src: '/assets/img/work-graph-verification-matrix.png',
+    title: { en: 'Verification matrix', ru: 'Матрица проверок' },
+    body: { en: 'Deterministic, optional and environment-dependent gates before done.', ru: 'Детерминированные, опциональные и environment-гейты перед done.' },
+  },
+  {
+    src: '/assets/img/work-graph-architecture-drawer.png',
+    title: { en: 'Architecture drawer', ru: 'Архитектура' },
+    body: { en: 'Architecture blocks and derived projections for project navigation.', ru: 'Архитектурные блоки и производные проекции для навигации.' },
+  },
+  {
+    src: '/assets/img/work-graph-kanban-board-dark.png',
+    title: { en: 'Dark mode', ru: 'Тёмная тема' },
+    body: { en: 'The same local board in dark mode.', ru: 'Та же локальная доска в тёмной теме.' },
+  },
+];
+
+function screenshotText(value, locale) {
+  return value[locale] ?? value.en;
+}
+
 function renderSection(section, copy) {
   const items = section.items
     ? `<ol class="flow-list">${section.items.map((item) => `<li>${escapeHtml(item)}</li>`).join('')}</ol>`
@@ -111,23 +148,29 @@ function renderSection(section, copy) {
 }
 
 function renderHeroVisual(locale) {
-  const labels = locale === 'ru'
-    ? ['Аналитика', 'Готово', 'В работе', 'Проверка']
-    : ['Analytics', 'Ready', 'Doing', 'Verify'];
-  return `<figure class="template-visual" aria-label="Work Graph board preview">
-    <div class="visual-toolbar">
-      <span></span><span></span><span></span>
-      <strong>Work Graph</strong>
+  return `<figure class="template-visual screenshot-hero" aria-label="Work Graph board preview">
+    <img src="/assets/img/work-graph-kanban-board-light.png" alt="${escapeAttr(locale === 'ru' ? 'Доска Work Graph' : 'Work Graph kanban board')}" loading="eager" decoding="async">
+    <figcaption>${escapeHtml(locale === 'ru' ? 'Локальная доска Work Graph: backlog, ready, in progress and done.' : 'Local Work Graph board: backlog, ready, in progress and done.')}</figcaption>
+  </figure>`;
+}
+
+function renderScreenshotGallery(locale) {
+  return `<section class="screenshot-gallery" aria-label="${escapeAttr(locale === 'ru' ? 'Скриншоты Work Graph' : 'Work Graph screenshots')}">
+    <div class="wide-heading">
+      <p class="eyebrow">${escapeHtml(locale === 'ru' ? 'Интерфейс' : 'Interface')}</p>
+      <h2>${escapeHtml(locale === 'ru' ? 'Как выглядит Work Graph' : 'What Work Graph looks like')}</h2>
+      <p>${escapeHtml(locale === 'ru' ? 'Реальные экраны локального UI: доска, аналитика, контракты задач, проверки и архитектура.' : 'Real local UI screens: board, analytics, task contracts, verification and architecture.')}</p>
     </div>
-    <div class="visual-board">
-      ${labels.map((label, columnIndex) => `<div class="visual-column">
-        <h3>${escapeHtml(label)}</h3>
-        ${[0, 1, 2].map((cardIndex) => `<div class="visual-card is-${(columnIndex + cardIndex) % 4}">
-          <span></span><p></p><small></small>
-        </div>`).join('')}
-      </div>`).join('')}
+    <div class="screenshot-grid">
+      ${SCREENSHOTS.map((shot) => `<figure class="screenshot-card">
+        <img src="${escapeAttr(shot.src)}" alt="${escapeAttr(screenshotText(shot.title, locale))}" loading="lazy" decoding="async">
+        <figcaption>
+          <strong>${escapeHtml(screenshotText(shot.title, locale))}</strong>
+          <span>${escapeHtml(screenshotText(shot.body, locale))}</span>
+        </figcaption>
+      </figure>`).join('')}
     </div>
-  </figure>`;
+  </section>`;
 }
 
 function renderTemplateAside(copy, locale, theme) {
@@ -549,6 +592,8 @@ export function renderPublicSiteHtml(page, options = {}) {
     .hero p { color: var(--muted); font-size: 1.125rem; line-height: 1.7; max-width: 820px; }
     .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
     .template-visual { background: var(--card); border: 1px solid var(--border); border-radius: 4px; box-shadow: var(--shadow-raised); margin: 0 auto 56px; max-width: 1040px; overflow: hidden; }
+    .screenshot-hero img { display: block; height: auto; width: 100%; }
+    .screenshot-hero figcaption { border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; padding: 12px 16px; }
     .visual-toolbar { align-items: center; background: #fafbfc; border-bottom: 1px solid var(--border); display: flex; gap: 8px; padding: 12px 14px; }
     .visual-toolbar span { background: var(--border); border-radius: 999px; height: 8px; width: 8px; }
     .visual-board { background: #f4f5f7; display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); min-height: 310px; padding: 18px; }
@@ -587,6 +632,12 @@ export function renderPublicSiteHtml(page, options = {}) {
     .proof-stats strong { color: var(--accent); display: block; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.04em; line-height: 1; }
     .proof-stats span { color: var(--muted); display: block; font-size: 13px; margin-top: 8px; }
     .graph-trinity, .pillar-section, .install-section, .code-showcase, .audience-section, .comparison-strip, .roadmap-faq { margin: 58px auto 0; max-width: 1200px; }
+    .screenshot-gallery { margin: 58px auto 0; max-width: 1200px; }
+    .screenshot-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
+    .screenshot-card { background: var(--card); border: 1px solid var(--border); border-radius: 4px; box-shadow: var(--shadow); margin: 0; overflow: hidden; }
+    .screenshot-card img { display: block; height: auto; width: 100%; }
+    .screenshot-card figcaption { border-top: 1px solid var(--border); display: grid; gap: 4px; padding: 14px; }
+    .screenshot-card figcaption span { color: var(--muted); font-size: 13px; }
     .wide-heading { max-width: 900px; }
     .graph-flow { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
     .graph-flow article { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 22px; position: relative; }
@@ -655,7 +706,7 @@ export function renderPublicSiteHtml(page, options = {}) {
       .visual-board { grid-template-columns: repeat(2, 1fr); }
       .content-layout { grid-template-columns: 1fr; }
       .template-aside { position: static; }
-      .proof-stats, .graph-flow, .pillar-grid, .install-section, .code-showcase, .audience-section > div, .comparison-strip > div, .roadmap-faq, .related-grid, .footer-columns { grid-template-columns: 1fr; }
+      .proof-stats, .graph-flow, .pillar-grid, .install-section, .code-showcase, .audience-section > div, .comparison-strip > div, .roadmap-faq, .related-grid, .footer-columns, .screenshot-grid { grid-template-columns: 1fr; }
       .graph-flow article + article::before { content: none; }
       table { display: block; overflow-x: auto; white-space: nowrap; }
     }
@@ -686,7 +737,7 @@ export function renderPublicSiteHtml(page, options = {}) {
           ${renderSteps(copy, locale)}
         </div>
       </div>
-      ${page.kind === 'home' ? renderHomeExpansion(locale) : ''}`}
+      ${page.kind === 'home' ? `${renderScreenshotGallery(locale)}${renderHomeExpansion(locale)}` : ''}`}
     </article>
     ${renderRelatedTemplates(locale, theme)}
     ${renderBottomCta(copy, locale, theme)}

package/vendor/src/publicSiteStandaloneServer.mjs

@@ -0,0 +1,97 @@
+#!/usr/bin/env node
+import { readFileSync } from 'node:fs';
+import { createServer } from 'node:http';
+import { join } from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+import { handlePublicSiteRequest } from './publicSiteServer.mjs';
+import { resolveInstallLayout } from './workGraphInstallLayout.mjs';
+
+const DEFAULT_HOST = '127.0.0.1';
+const DEFAULT_PORT = 4178;
+
+const { PUBLIC_ROOT, DESIGN_TOKENS_WG_CSS_PATH } = resolveInstallLayout({ moduleUrl: import.meta.url });
+
+function sendText(response, statusCode, body, contentType = 'text/plain') {
+  response.writeHead(statusCode, {
+    'content-type': `${contentType}; charset=utf-8`,
+    'cache-control': 'no-store',
+  });
+  response.end(body);
+}
+
+function serveFile(response, filePath, contentType) {
+  try {
+    const source = readFileSync(filePath);
+    response.writeHead(200, {
+      'content-type': contentType,
+      'cache-control': 'public, max-age=3600',
+    });
+    response.end(source);
+  } catch {
+    sendText(response, 404, 'not_found');
+  }
+}
+
+function serveAssetDir(url, response, rootDir, urlPrefix) {
+  if (!url.pathname.startsWith(urlPrefix)) return false;
+  const relativePath = decodeURIComponent(url.pathname.slice(urlPrefix.length));
+  if (!relativePath || relativePath.includes('..')) {
+    sendText(response, 403, 'forbidden');
+    return true;
+  }
+  const filePath = join(rootDir, relativePath);
+  if (!filePath.startsWith(rootDir)) {
+    sendText(response, 403, 'forbidden');
+    return true;
+  }
+  const contentType = filePath.endsWith('.svg')
+    ? 'image/svg+xml; charset=utf-8'
+    : filePath.endsWith('.png')
+      ? 'image/png'
+      : filePath.endsWith('.css')
+        ? 'text/css; charset=utf-8'
+        : filePath.endsWith('.woff2')
+          ? 'font/woff2'
+          : 'application/octet-stream';
+  serveFile(response, filePath, contentType);
+  return true;
+}
+
+export function createPublicSiteServer() {
+  return createServer((request, response) => {
+    const url = new URL(request.url ?? '/', `http://${DEFAULT_HOST}`);
+    const method = request.method ?? 'GET';
+    if (method !== 'GET') {
+      sendText(response, 405, 'method_not_allowed');
+      return;
+    }
+
+    if (serveAssetDir(url, response, join(PUBLIC_ROOT, 'assets', 'img'), '/assets/img/')) return;
+    if (serveAssetDir(url, response, join(PUBLIC_ROOT, 'assets', 'icons'), '/assets/icons/')) return;
+    if (serveAssetDir(url, response, join(PUBLIC_ROOT, 'assets', 'avatars'), '/assets/avatars/')) return;
+    if (serveAssetDir(url, response, join(PUBLIC_ROOT, 'fonts'), '/assets/fonts/')) return;
+
+    if (url.pathname === '/assets/favicon.svg') {
+      serveFile(response, join(PUBLIC_ROOT, 'assets', 'favicon.svg'), 'image/svg+xml; charset=utf-8');
+      return;
+    }
+
+    if (url.pathname === '/assets/design-tokens-workgraph-dark.css') {
+      serveFile(response, DESIGN_TOKENS_WG_CSS_PATH, 'text/css; charset=utf-8');
+      return;
+    }
+
+    if (handlePublicSiteRequest(request, response, url)) return;
+    sendText(response, 404, 'not_found');
+  });
+}
+
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
+  const host = process.env.WORKGRAPH_PUBLIC_SITE_HOST ?? DEFAULT_HOST;
+  const port = Number(process.env.WORKGRAPH_PUBLIC_SITE_PORT ?? DEFAULT_PORT);
+  const server = createPublicSiteServer();
+  server.listen(port, host, () => {
+    console.log(`Work Graph public site: http://${host}:${port}/`);
+  });
+}

package/vendor/src/workGraphBacklogUiServer.mjs

@@ -18,7 +18,6 @@ import {
 import { buildCodeGapOperatorProjection } from './codeGapOperatorProjection.mjs';
 import { buildEpicWorkScopeSlice } from './epicWorkScope.mjs';
 import { renderUiKitPageHtml } from './ui/pages/uiKitPage.mjs';
-import { handlePublicSiteRequest } from './publicSiteServer.mjs';
 import { UI_BUTTON_CSS } from './ui/atoms/button.mjs';
 import { UI_BADGE_CSS } from './ui/atoms/badge.mjs';
 import { UI_SELECT_CSS } from './ui/atoms/select.mjs';
@@ -140,6 +139,13 @@ function tryServePublicAvatarsAsset(url, response) {
   return tryServePublicAssetDir(url, response, join(PUBLIC_ROOT, 'assets', 'avatars'), '/assets/avatars/');
 }
 
+function tryServePublicImagesAsset(url, response) {
+  if (!url.pathname.startsWith('/assets/img/')) {
+    return false;
+  }
+  return tryServePublicAssetDir(url, response, join(PUBLIC_ROOT, 'assets', 'img'), '/assets/img/');
+}
+
 function tryServePublicAssetDir(url, response, rootDir, urlPrefix) {
   const relativePath = decodeURIComponent(url.pathname.slice(urlPrefix.length));
   if (!relativePath || relativePath.includes('..')) {
@@ -155,7 +161,9 @@ function tryServePublicAssetDir(url, response, rootDir, urlPrefix) {
     const source = readFileSync(filePath);
     const contentType = filePath.endsWith('.svg')
       ? 'image/svg+xml; charset=utf-8'
-      : 'application/octet-stream';
+      : filePath.endsWith('.png')
+        ? 'image/png'
+        : 'application/octet-stream';
     response.writeHead(200, {
       'content-type': contentType,
       'cache-control': 'public, max-age=3600',
@@ -9878,10 +9886,6 @@ export function createBacklogUiServer(options = {}) {
     const cwd = requestCtx.repoRoot;
     const serverOptions = { cwd, backlogPath, journalPath, auditPath };
 
-    if (handlePublicSiteRequest(request, response, url)) {
-      return;
-    }
-
     if (url.pathname === '/api/prompt-rules-projection' && method === 'GET') {
       try {
         const ruleId = url.searchParams.get('ruleId') ?? url.searchParams.get('id') ?? undefined;
@@ -10690,6 +10694,9 @@ export function createBacklogUiServer(options = {}) {
     if (tryServePublicAvatarsAsset(url, response)) {
       return;
     }
+    if (tryServePublicImagesAsset(url, response)) {
+      return;
+    }
 
     if (url.pathname === '/favicon.ico' && method === 'GET') {
       response.writeHead(204);
@@ -10772,7 +10779,7 @@ export function createBacklogUiServer(options = {}) {
       return;
     }
 
-    if (url.pathname === '/app' || url.pathname === '/app/' || url.pathname === '/app/index.html') {
+    if (url.pathname === '/' || url.pathname === '/app' || url.pathname === '/app/' || url.pathname === '/app/index.html') {
       const locale = resolveUiLocale({
         cookieHeader: request.headers.cookie,
         acceptLanguage: request.headers['accept-language'],