docs: refresh app view screenshots and add manual capture workflow

Makefile

@@ -5,7 +5,7 @@
 # Make these targets phony (they don't create files with these names)
 .PHONY: all setup dev clean clean-all build build-win build-linux \
         build-mac build-mac-arm build-mac-universal \
-        test css css-watch lint format validate qa setup-hooks sonar \
+        test css css-watch lint lint-md format validate qa docs-screenshots setup-hooks sonar \
         security gitleaks sbom renovate renovate-local mend-scan \
         icons sample-logo release
 
@@ -59,6 +59,9 @@ css-watch: setup-scripts
 lint: setup-scripts
 	@node scripts/index.js lint
 
+lint-md: setup-scripts
+	@node scripts/index.js lint-md
+
 format: setup-scripts
 	@node scripts/index.js format
 
@@ -68,6 +71,9 @@ validate: setup-scripts
 qa: setup-scripts
 	@node scripts/index.js qa
 
+docs-screenshots: setup-scripts
+	@node scripts/index.js docs-screenshots
+
 setup-hooks: setup-scripts
 	@node scripts/index.js hooks
 

README.md

@@ -8,7 +8,47 @@ A desktop app to prepare code repositories for AI workflows.
 - File filtering with custom patterns and `.gitignore` support
 - Token counting support for selected files
 - Processed output ready to copy/export for AI tools
+- Export format selector: Markdown or XML
 - Cross-platform support (Windows, macOS, Linux)
+- UI panel screenshots: `docs/APP_VIEWS.md`
+
+## Processed Output Example
+
+![Processed Output panel](docs/images/app-processed-panel.png)
+
+Full sample files:
+
+- Markdown: [`docs/examples/output-markdown.md`](docs/examples/output-markdown.md)
+- XML: [`docs/examples/output.xml`](docs/examples/output.xml)
+
+### Markdown export example
+
+````md
+# Repository Analysis
+
+## src/App.tsx
+
+```ts
+export function App() {
+  return <main>Hello AI Code Fusion</main>;
+}
+```
+
+Tokens: 120
+````
+
+### XML export example
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<repository totalFiles="1" totalTokens="120">
+  <file path="src/App.tsx" tokens="120"><![CDATA[
+export function App() {
+  return <main>Hello AI Code Fusion</main>;
+}
+  ]]></file>
+</repository>
+```
 
 ## Download Release
 

docs/APP_VIEWS.md

@@ -0,0 +1,31 @@
+# App Views
+
+This page shows up-to-date screenshots for the main app panels.
+
+## Start Panel (Config)
+
+![Start panel with filtering and output options](images/app-config-panel.png)
+
+## Select Files Panel
+
+![Select Files panel with repository tree](images/app-select-panel.png)
+
+## Select Files Panel (With Selection)
+
+![Select Files panel after choosing files](images/app-select-panel-selected.png)
+
+## Select Files Panel (Resized)
+
+![Select Files panel in resized viewport](images/app-select-panel-resized.png)
+
+## Processed Output Panel
+
+![Processed Output panel with generated content and token table](images/app-processed-panel.png)
+
+## Refresh Screenshots
+
+```bash
+npm run docs:screenshots
+```
+
+This command runs the Playwright capture flow and updates screenshots in `docs/images/`.

docs/DEVELOPMENT.md

@@ -46,9 +46,11 @@ make build-mac
 # Quality
 make test
 make lint
+make lint-md
 make format
 make validate
 make qa
+make docs-screenshots
 
 # Security / dependency automation
 make security

docs/examples/output-markdown.md

@@ -0,0 +1,23 @@
+# Repository Analysis
+
+## src/App.tsx
+
+```ts
+export function App() {
+  return <main>Hello AI Code Fusion</main>;
+}
+```
+
+Tokens: 120
+
+## src/features/feature-24/ui/Feature24Panel.tsx
+
+```ts
+export function Feature24Panel() {
+  return <section>Panel content</section>;
+}
+```
+
+Tokens: 240
+
+--END--

docs/examples/output.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<repository totalFiles="2" totalTokens="360">
+  <file path="src/App.tsx" tokens="120"><![CDATA[
+export function App() {
+  return <main>Hello AI Code Fusion</main>;
+}
+  ]]></file>
+  <file path="src/features/feature-24/ui/Feature24Panel.tsx" tokens="240"><![CDATA[
+export function Feature24Panel() {
+  return <section>Panel content</section>;
+}
+  ]]></file>
+</repository>

package.json

@@ -17,7 +17,8 @@
     "predev": "npm run build:ts && node scripts/clean-dev-assets.js",
     "dev": "node scripts/index.js dev",
     "clear-assets": "rimraf src/renderer/bundle.js src/renderer/bundle.js.map src/renderer/bundle.js.LICENSE.txt src/renderer/output.css",
-    "lint": "cross-env ESLINT_USE_FLAT_CONFIG=false eslint src tests --ext .js,.jsx,.ts,.tsx --cache",
+    "lint": "cross-env ESLINT_USE_FLAT_CONFIG=false eslint src tests --ext .js,.jsx,.ts,.tsx --cache && npm run lint:md",
+    "lint:md": "node scripts/lint-markdown-links.js",
     "lint:tests": "cross-env ESLINT_USE_FLAT_CONFIG=false eslint tests --ext .js,.jsx,.ts,.tsx --cache",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,html,css}\"",
     "test": "jest --config jest.config.js --passWithNoTests",
@@ -33,6 +34,8 @@
     "qa": "node scripts/index.js qa",
     "preqa:screenshot": "npm run build:ts",
     "qa:screenshot": "node scripts/capture-ui-screenshot.js",
+    "predocs:screenshots": "npm run build:ts && npm run build:webpack",
+    "docs:screenshots": "node scripts/generate-doc-screenshots.js",
     "security": "node scripts/index.js security",
     "gitleaks": "node scripts/index.js gitleaks",
     "gitleaks:staged": "node scripts/index.js gitleaks-staged",

scripts/capture-ui-screenshot.js

@@ -7,7 +7,8 @@ const { chromium } = require('playwright');
 
 const ROOT_DIR = path.join(__dirname, '..');
 const RENDERER_DIR = path.join(ROOT_DIR, 'src', 'renderer');
-const SCREENSHOT_DIR = path.join(ROOT_DIR, 'dist', 'qa', 'screenshots');
+const DEFAULT_SCREENSHOT_DIR = path.join('dist', 'qa', 'screenshots');
+const SCREENSHOT_DIR = resolveOutputDirectory(process.env.UI_SCREENSHOT_DIR);
 const PORT = Number(process.env.UI_SCREENSHOT_PORT || 4173);
 const DEFAULT_SCREENSHOT_NAME = `ui-${process.platform}-${process.arch}.png`;
 const FIXED_MTIME = 1700000000000;
@@ -58,6 +59,21 @@ function sanitizeScreenshotName(nameCandidate) {
   return withExtension;
 }
 
+function resolveOutputDirectory(dirCandidate) {
+  const rawDir =
+    typeof dirCandidate === 'string' && dirCandidate.trim()
+      ? dirCandidate.trim()
+      : DEFAULT_SCREENSHOT_DIR;
+  const absoluteDir = path.resolve(ROOT_DIR, rawDir);
+  const relativeToRoot = path.relative(ROOT_DIR, absoluteDir);
+
+  if (relativeToRoot.startsWith('..') || path.isAbsolute(relativeToRoot)) {
+    throw new Error(`Invalid screenshot directory: ${rawDir}`);
+  }
+
+  return absoluteDir;
+}
+
 function resolveOutputPath(fileName) {
   const targetPath = path.resolve(SCREENSHOT_DIR, fileName);
   const relativeToRoot = path.relative(SCREENSHOT_DIR, targetPath);
@@ -313,12 +329,14 @@ const SCREENSHOTS = {
   sourceTab: resolveOutputPath(`${SCREENSHOT_BASE_NAME}-source.png`),
   sourceSelected: resolveOutputPath(`${SCREENSHOT_BASE_NAME}-source-selected.png`),
   sourceSelectedResized: resolveOutputPath(`${SCREENSHOT_BASE_NAME}-source-selected-resized.png`),
+  processedTab: resolveOutputPath(`${SCREENSHOT_BASE_NAME}-processed.png`),
 };
 
 const UI_SELECTORS = {
   appRoot: '#app',
   configTab: '[data-tab="config"]',
   sourceTab: '[data-tab="source"]',
+  processedTabActive: '[data-tab="processed"][aria-selected="true"]',
   secretScanningToggle: '#enable-secret-scanning',
   suspiciousFilesToggle: '#exclude-suspicious-files',
   sourceFolderExpandButton: 'button[aria-label="Expand folder src"]',
@@ -331,6 +349,7 @@ const UI_SELECTORS = {
   refreshFileListButton: 'button[title="Refresh the file list"]',
   fileTreeScrollContainer: '.file-tree .overflow-auto',
   processSelectedFilesButton: '[data-testid="process-selected-files-button"]',
+  processedContent: '#processed-content',
 };
 
 async function setupMockElectronApi(page) {
@@ -358,20 +377,65 @@ async function setupMockElectronApi(page) {
           const tree = excludeSensitiveFiles ? mockFilteredDirectoryTree : mockDirectoryTree;
           return cloneTree(tree);
         },
-        analyzeRepository: async () => ({
-          totalFiles: 0,
-          totalTokens: 0,
-          files: [],
-        }),
-        processRepository: async () => ({
-          content: '',
-          stats: {
-            totalFiles: 0,
-            totalTokens: 0,
+        analyzeRepository: async (options = {}) => {
+          const selectedFilePaths = Array.isArray(options?.selectedFiles) ? options.selectedFiles : [];
+          const filesInfo = selectedFilePaths.map((filePath, index) => {
+            const normalizedPath = String(filePath);
+            const relativePath = normalizedPath.startsWith(`${mockRootPath}/`)
+              ? normalizedPath.slice(mockRootPath.length + 1)
+              : normalizedPath;
+            return {
+              path: relativePath,
+              tokens: 120 * (index + 1),
+              isBinary: false,
+            };
+          });
+
+          return {
+            totalFiles: filesInfo.length,
+            totalTokens: filesInfo.reduce((sum, file) => sum + file.tokens, 0),
+            filesInfo,
+          };
+        },
+        processRepository: async (options = {}) => {
+          const inputFilesInfo = Array.isArray(options?.filesInfo) ? options.filesInfo : [];
+          const filesInfo = inputFilesInfo.map((file, index) => ({
+            path: String(file?.path || `src/file-${index + 1}.ts`),
+            tokens:
+              Number.isFinite(file?.tokens) && Number(file.tokens) > 0 ? Number(file.tokens) : 120 * (index + 1),
+            isBinary: false,
+          }));
+          const totalTokens = filesInfo.reduce((sum, file) => sum + file.tokens, 0);
+          const exportFormat = options?.options?.exportFormat === 'xml' ? 'xml' : 'markdown';
+          const content =
+            exportFormat === 'xml'
+              ? [
+                  '<?xml version="1.0" encoding="UTF-8"?>',
+                  `<repository totalFiles="${filesInfo.length}" totalTokens="${totalTokens}">`,
+                  ...filesInfo.map(
+                    (file) =>
+                      `  <file path="${file.path}" tokens="${file.tokens}"><![CDATA[// Preview for ${file.path}]]></file>`
+                  ),
+                  '</repository>',
+                ].join('\n')
+              : [
+                  '# Repository Analysis',
+                  '',
+                  ...filesInfo.map(
+                    (file) => `## ${file.path}\n\n\`\`\`ts\n// Preview for ${file.path}\n\`\`\`\nTokens: ${file.tokens}\n`
+                  ),
+                  '--END--',
+                ].join('\n');
+
+          return {
+            content,
+            exportFormat,
+            totalTokens,
+            processedFiles: filesInfo.length,
             skippedFiles: 0,
-            processedFiles: 0,
-          },
-        }),
+            filesInfo,
+          };
+        },
         countFilesTokens: async (options) => {
           const filePaths = Array.isArray(options?.filePaths) ? options.filePaths : [];
           const results = {};
@@ -569,6 +633,33 @@ async function captureAppStateScreenshots(page) {
   await runStep('Capture resized screenshot with deep tree expanded', async () => {
     await page.screenshot({ path: SCREENSHOTS.sourceSelectedResized, fullPage: true });
   });
+
+  await runStep('Return to desktop viewport before processing', async () => {
+    await page.setViewportSize({ width: 1440, height: 900 });
+  });
+
+  await runStep('Wait for process button to be enabled', async () => {
+    await page.waitForFunction((selector) => {
+      const button = document.querySelector(selector);
+      if (!(button instanceof HTMLButtonElement)) {
+        return false;
+      }
+      return !button.disabled && /process selected files/i.test(button.textContent || '');
+    }, UI_SELECTORS.processSelectedFilesButton);
+  });
+
+  await runStep('Process selected files', async () => {
+    await page.locator(UI_SELECTORS.processSelectedFilesButton).first().click();
+  });
+
+  await runStep('Wait for processed panel to render', async () => {
+    await page.waitForSelector(UI_SELECTORS.processedTabActive, { timeout: 10000 });
+    await page.waitForSelector(UI_SELECTORS.processedContent, { timeout: 10000 });
+  });
+
+  await runStep('Capture processed tab screenshot', async () => {
+    await page.screenshot({ path: SCREENSHOTS.processedTab, fullPage: true });
+  });
 }
 
 async function captureScreenshot() {