feat: first cut at the import execution

This commit is contained in:
2026-02-14 20:49:43 +01:00
parent 973d6af231
commit b036cf3c46
13 changed files with 5130 additions and 5 deletions

View File

@@ -0,0 +1,696 @@
/**
* ImportExecutionEngine - Executes WXR import based on analysis results
*
* Handles the 4-phase import process:
* 1. Create new tags/categories
* 2. Import posts (handling conflicts correctly)
* 3. Import media (with post linkage)
* 4. Import pages (as posts with "page" category)
*/
import { EventEmitter } from 'events';
import { v4 as uuidv4 } from 'uuid';
import * as fs from 'fs/promises';
import * as path from 'path';
import * as crypto from 'crypto';
import matter from 'gray-matter';
import { app } from 'electron';
import TurndownService from 'turndown';
import { getDatabase } from '../database';
import { posts, media, NewPost, NewMedia } from '../database/schema';
import { eq } from 'drizzle-orm';
import { getTagEngine } from './TagEngine';
import { getPostEngine, PostData } from './PostEngine';
import { getMediaEngine, MediaData } from './MediaEngine';
import type {
ImportAnalysisReport,
AnalyzedPost,
AnalyzedMedia,
AnalyzedCategory,
AnalyzedTag,
ImportConflictResolution,
} from './ImportAnalysisEngine';
import type { WxrPost, WxrMedia } from './WxrParser';
export interface ImportExecutionOptions {
/** Path to the WordPress uploads folder for media files */
uploadsFolder?: string;
/** Progress callback */
onProgress?: (phase: string, current: number, total: number, detail?: string) => void;
}
export interface ImportExecutionResult {
success: boolean;
tags: {
created: number;
skipped: number;
};
posts: {
imported: number;
skipped: number;
errors: number;
};
media: {
imported: number;
skipped: number;
errors: number;
};
pages: {
imported: number;
skipped: number;
errors: number;
};
/** Mapping from WordPress post ID to our post GUID */
wpIdToPostId: Map<number, string>;
errors: string[];
}
// Regex to match WordPress shortcodes: [macroname ...] but NOT [[macroname ...]]
const WP_SHORTCODE_REGEX = /(?<!\[)\[(\w+)([^\]]*?)(?:\s*\/)?\](?!\])/g;
export class ImportExecutionEngine extends EventEmitter {
private currentProjectId: string = 'default';
private dataDir: string | null = null;
private turndown: TurndownService;
constructor() {
super();
this.turndown = new TurndownService({
headingStyle: 'atx',
codeBlockStyle: 'fenced',
bulletListMarker: '-',
});
}
setProjectContext(projectId: string, dataDir?: string): void {
this.currentProjectId = projectId;
this.dataDir = dataDir || null;
}
getProjectContext(): string {
return this.currentProjectId;
}
private getBaseDir(): string {
if (this.dataDir) return this.dataDir;
const userDataPath = app.getPath('userData');
return path.join(userDataPath, 'projects', this.currentProjectId);
}
private getPostsBaseDir(): string {
return path.join(this.getBaseDir(), 'posts');
}
private getMediaBaseDir(): string {
return path.join(this.getBaseDir(), 'media');
}
/**
* Get the date-based directory for posts (posts/YYYY/MM/)
*/
private getPostsDirForDate(date: Date): string {
const baseDir = this.getPostsBaseDir();
const year = date.getFullYear().toString();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
return path.join(baseDir, year, month);
}
/**
* Get the date-based directory for media (media/YYYY/MM/)
*/
private getMediaDirForDate(date: Date): string {
const baseDir = this.getMediaBaseDir();
const year = date.getFullYear().toString();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
return path.join(baseDir, year, month);
}
/**
* Execute the full import process
*/
async executeImport(
report: ImportAnalysisReport,
options: ImportExecutionOptions
): Promise<ImportExecutionResult> {
const result: ImportExecutionResult = {
success: true,
tags: { created: 0, skipped: 0 },
posts: { imported: 0, skipped: 0, errors: 0 },
media: { imported: 0, skipped: 0, errors: 0 },
pages: { imported: 0, skipped: 0, errors: 0 },
wpIdToPostId: new Map(),
errors: [],
};
const progress = options.onProgress || (() => {});
try {
// Build tag/category mappings
const tagMapping = this.buildTaxonomyMapping(report.tags);
const categoryMapping = this.buildTaxonomyMapping(report.categories);
// Phase 1: Create new tags
progress('tags', 0, report.tags.length + report.categories.length, 'Creating tags...');
await this.executePhase1Tags(report, tagMapping, categoryMapping, result, progress);
// Phase 2: Import posts
progress('posts', 0, report.posts.items.length, 'Importing posts...');
await this.executePhase2Posts(report, tagMapping, categoryMapping, result, options, progress);
// Phase 3: Import media
progress('media', 0, report.media.items.length, 'Importing media...');
await this.executePhase3Media(report, result, options, progress);
// Phase 4: Import pages
progress('pages', 0, report.pages.items.length, 'Importing pages...');
await this.executePhase4Pages(report, tagMapping, categoryMapping, result, options, progress);
progress('complete', 1, 1, 'Import complete');
} catch (error) {
result.success = false;
result.errors.push(error instanceof Error ? error.message : String(error));
}
return result;
}
/**
* Build a mapping from original taxonomy name to resolved name
* - If existsInProject: use the name as-is (lowercase)
* - If mappedTo: use the mappedTo value (lowercase)
* - Otherwise: use the name and mark for creation
*/
private buildTaxonomyMapping(
items: Array<{ name: string; existsInProject: boolean; mappedTo?: string }>
): Map<string, { resolved: string; needsCreation: boolean }> {
const mapping = new Map<string, { resolved: string; needsCreation: boolean }>();
for (const item of items) {
const key = item.name.toLowerCase();
if (item.mappedTo) {
// Mapped to existing tag
mapping.set(key, { resolved: item.mappedTo.toLowerCase(), needsCreation: false });
} else if (item.existsInProject) {
// Already exists
mapping.set(key, { resolved: key, needsCreation: false });
} else {
// New tag to create
mapping.set(key, { resolved: key, needsCreation: true });
}
}
return mapping;
}
/**
* Phase 1: Create new tags and categories
*/
private async executePhase1Tags(
report: ImportAnalysisReport,
tagMapping: Map<string, { resolved: string; needsCreation: boolean }>,
categoryMapping: Map<string, { resolved: string; needsCreation: boolean }>,
result: ImportExecutionResult,
progress: (phase: string, current: number, total: number, detail?: string) => void
): Promise<void> {
const tagEngine = getTagEngine();
tagEngine.setProjectContext(this.currentProjectId);
let current = 0;
const total = report.tags.length + report.categories.length;
// Create new tags
for (const tag of report.tags) {
current++;
const mapping = tagMapping.get(tag.name.toLowerCase());
if (mapping?.needsCreation) {
try {
await tagEngine.createTag({ name: mapping.resolved });
result.tags.created++;
progress('tags', current, total, `Created tag: ${mapping.resolved}`);
} catch (error) {
// Tag might already exist (race condition or duplicate in list)
result.tags.skipped++;
}
} else {
result.tags.skipped++;
}
}
// Create new categories (as tags)
for (const category of report.categories) {
current++;
const mapping = categoryMapping.get(category.name.toLowerCase());
if (mapping?.needsCreation) {
try {
await tagEngine.createTag({ name: mapping.resolved });
result.tags.created++;
progress('tags', current, total, `Created category tag: ${mapping.resolved}`);
} catch (error) {
result.tags.skipped++;
}
} else {
result.tags.skipped++;
}
}
}
/**
* Phase 2: Import posts
*/
private async executePhase2Posts(
report: ImportAnalysisReport,
tagMapping: Map<string, { resolved: string; needsCreation: boolean }>,
categoryMapping: Map<string, { resolved: string; needsCreation: boolean }>,
result: ImportExecutionResult,
options: ImportExecutionOptions,
progress: (phase: string, current: number, total: number, detail?: string) => void
): Promise<void> {
const total = report.posts.items.length;
for (let i = 0; i < report.posts.items.length; i++) {
const analyzed = report.posts.items[i];
progress('posts', i + 1, total, `Processing: ${analyzed.wxrPost.title}`);
try {
const imported = await this.importPost(analyzed, tagMapping, categoryMapping, result, options);
if (imported) {
result.posts.imported++;
} else {
result.posts.skipped++;
}
} catch (error) {
result.posts.errors++;
result.errors.push(`Failed to import post "${analyzed.wxrPost.title}": ${error instanceof Error ? error.message : String(error)}`);
}
}
}
/**
* Import a single post
*/
private async importPost(
analyzed: AnalyzedPost,
tagMapping: Map<string, { resolved: string; needsCreation: boolean }>,
categoryMapping: Map<string, { resolved: string; needsCreation: boolean }>,
result: ImportExecutionResult,
options: ImportExecutionOptions
): Promise<boolean> {
const wxrPost = analyzed.wxrPost;
// Handle different analysis statuses
if (analyzed.status === 'content-duplicate') {
// Skip content duplicates
return false;
}
if (analyzed.status === 'update') {
// Skip updates (same content already exists)
return false;
}
if (analyzed.status === 'conflict') {
const resolution = analyzed.conflictResolution || 'ignore';
if (resolution === 'ignore') {
return false;
}
// Handle overwrite and import
return await this.importPostWithConflict(analyzed, resolution, tagMapping, categoryMapping, result, options);
}
// New post - import it
return await this.createImportedPost(analyzed, tagMapping, categoryMapping, result, options, 'published');
}
/**
* Import a post that has a conflict
*/
private async importPostWithConflict(
analyzed: AnalyzedPost,
resolution: ImportConflictResolution,
tagMapping: Map<string, { resolved: string; needsCreation: boolean }>,
categoryMapping: Map<string, { resolved: string; needsCreation: boolean }>,
result: ImportExecutionResult,
options: ImportExecutionOptions
): Promise<boolean> {
const postEngine = getPostEngine();
if (resolution === 'overwrite') {
// Create as draft with the same slug (user needs to review and publish)
return await this.createImportedPost(analyzed, tagMapping, categoryMapping, result, options, 'draft');
}
if (resolution === 'import') {
// Create with a new unique slug
const newSlug = await postEngine.generateUniqueSlug(analyzed.wxrPost.title);
return await this.createImportedPost(analyzed, tagMapping, categoryMapping, result, options, 'published', newSlug);
}
return false;
}
/**
* Create an imported post
*/
private async createImportedPost(
analyzed: AnalyzedPost,
tagMapping: Map<string, { resolved: string; needsCreation: boolean }>,
categoryMapping: Map<string, { resolved: string; needsCreation: boolean }>,
result: ImportExecutionResult,
options: ImportExecutionOptions,
status: 'draft' | 'published',
overrideSlug?: string
): Promise<boolean> {
const wxrPost = analyzed.wxrPost;
const db = getDatabase().getLocal();
// Transform WordPress shortcodes [shortcode] to [[shortcode]] BEFORE markdown conversion
// (TurndownService escapes brackets, so we must transform first)
const contentWithShortcodes = this.transformShortcodes(wxrPost.content);
// Convert HTML content to Markdown
const transformedContent = this.convertToMarkdown(contentWithShortcodes);
// Resolve tags
const resolvedTags = this.resolveTaxonomy(wxrPost.tags, tagMapping);
// Resolve categories
const resolvedCategories = this.resolveTaxonomy(wxrPost.categories, categoryMapping);
// Determine dates (dates may be strings after JSON serialization through IPC)
const createdAt = this.toDate(wxrPost.postDate) || this.toDate(wxrPost.pubDate) || new Date();
const updatedAt = this.toDate(wxrPost.postModified) || createdAt;
const publishedAt = status === 'published' ? (this.toDate(wxrPost.pubDate) || createdAt) : undefined;
// Generate post ID
const postId = uuidv4();
// Build post data
const postData: PostData = {
id: postId,
projectId: this.currentProjectId,
title: wxrPost.title,
slug: overrideSlug || wxrPost.slug,
excerpt: wxrPost.excerpt || undefined,
content: transformedContent,
status,
author: wxrPost.creator || undefined,
createdAt,
updatedAt,
publishedAt,
tags: resolvedTags,
categories: resolvedCategories,
};
// Write to filesystem first (for published posts)
let filePath = '';
if (status === 'published') {
filePath = await this.writePostFile(postData);
}
// Calculate checksum
const checksum = this.calculateChecksum(transformedContent);
// Insert into database
const dbPost: NewPost = {
id: postData.id,
projectId: postData.projectId,
title: postData.title,
slug: postData.slug,
excerpt: postData.excerpt,
content: status === 'draft' ? postData.content : null, // Draft content in DB, published in file
status: postData.status,
author: postData.author,
createdAt: postData.createdAt,
updatedAt: postData.updatedAt,
publishedAt: postData.publishedAt,
filePath,
checksum,
tags: JSON.stringify(postData.tags),
categories: JSON.stringify(postData.categories),
};
await db.insert(posts).values(dbPost);
// Update FTS index
const postEngine = getPostEngine();
await postEngine.updateFTSIndex(postData);
// Track wpId to postId mapping
result.wpIdToPostId.set(wxrPost.wpId, postId);
return true;
}
/**
* Write a post file to the filesystem
*/
private async writePostFile(post: PostData): Promise<string> {
const metadata: Record<string, unknown> = {
id: post.id,
projectId: post.projectId,
title: post.title,
slug: post.slug,
status: post.status,
createdAt: post.createdAt.toISOString(),
updatedAt: post.updatedAt.toISOString(),
tags: post.tags,
categories: post.categories,
};
if (post.excerpt) metadata.excerpt = post.excerpt;
if (post.author) metadata.author = post.author;
if (post.publishedAt) metadata.publishedAt = post.publishedAt.toISOString();
const postsDir = this.getPostsDirForDate(post.createdAt);
await fs.mkdir(postsDir, { recursive: true });
const fileContent = matter.stringify(post.content, metadata);
const filePath = path.join(postsDir, `${post.slug}.md`);
await fs.writeFile(filePath, fileContent, 'utf-8');
return filePath;
}
/**
* Phase 3: Import media files
*/
private async executePhase3Media(
report: ImportAnalysisReport,
result: ImportExecutionResult,
options: ImportExecutionOptions,
progress: (phase: string, current: number, total: number, detail?: string) => void
): Promise<void> {
const total = report.media.items.length;
for (let i = 0; i < report.media.items.length; i++) {
const analyzed = report.media.items[i];
progress('media', i + 1, total, `Processing: ${analyzed.wxrMedia.filename}`);
try {
const imported = await this.importMediaFile(analyzed, result, options);
if (imported) {
result.media.imported++;
} else {
result.media.skipped++;
}
} catch (error) {
result.media.errors++;
result.errors.push(`Failed to import media "${analyzed.wxrMedia.filename}": ${error instanceof Error ? error.message : String(error)}`);
}
}
}
/**
* Import a single media file
*/
private async importMediaFile(
analyzed: AnalyzedMedia,
result: ImportExecutionResult,
options: ImportExecutionOptions
): Promise<boolean> {
const wxrMedia = analyzed.wxrMedia;
// Skip missing files
if (analyzed.status === 'missing') {
return false;
}
// Skip content duplicates
if (analyzed.status === 'content-duplicate') {
return false;
}
// Handle conflicts
if (analyzed.status === 'conflict') {
const resolution = (analyzed as any).conflictResolution || 'ignore';
if (resolution === 'ignore') {
return false;
}
// For 'overwrite' or 'import', proceed with import
}
// Skip updates (same content already exists)
if (analyzed.status === 'update') {
return false;
}
// Build source path
if (!options.uploadsFolder) {
return false;
}
const sourcePath = path.join(options.uploadsFolder, wxrMedia.relativePath);
// Check if file exists
try {
await fs.access(sourcePath);
} catch {
return false;
}
// Resolve parent post ID
const linkedPostIds: string[] = [];
if (wxrMedia.parentId && wxrMedia.parentId > 0) {
const parentPostId = result.wpIdToPostId.get(wxrMedia.parentId);
if (parentPostId) {
linkedPostIds.push(parentPostId);
}
}
// Determine creation date from WXR (may be string after JSON serialization)
const createdAt = this.toDate(wxrMedia.pubDate) || new Date();
// Import the media file
const mediaEngine = getMediaEngine();
await mediaEngine.importMedia(sourcePath, {
caption: wxrMedia.title || undefined,
alt: wxrMedia.description || undefined,
mimeType: wxrMedia.mimeType,
tags: [],
linkedPostIds,
createdAt,
updatedAt: createdAt,
});
return true;
}
/**
* Phase 4: Import pages as posts with "page" category
*/
private async executePhase4Pages(
report: ImportAnalysisReport,
tagMapping: Map<string, { resolved: string; needsCreation: boolean }>,
categoryMapping: Map<string, { resolved: string; needsCreation: boolean }>,
result: ImportExecutionResult,
options: ImportExecutionOptions,
progress: (phase: string, current: number, total: number, detail?: string) => void
): Promise<void> {
const total = report.pages.items.length;
// Ensure "page" category exists in mapping
if (!categoryMapping.has('page')) {
categoryMapping.set('page', { resolved: 'page', needsCreation: false });
}
for (let i = 0; i < report.pages.items.length; i++) {
const analyzed = report.pages.items[i];
const wxrPage = analyzed.wxrPost;
// Add "page" to categories
const modifiedWxrPost: WxrPost = {
...wxrPage,
categories: [...wxrPage.categories, 'page'],
};
const modifiedAnalyzed: AnalyzedPost = {
...analyzed,
wxrPost: modifiedWxrPost,
};
progress('pages', i + 1, total, `Processing: ${wxrPage.title}`);
try {
const imported = await this.importPost(modifiedAnalyzed, tagMapping, categoryMapping, result, options);
if (imported) {
result.pages.imported++;
} else {
result.pages.skipped++;
}
} catch (error) {
result.pages.errors++;
result.errors.push(`Failed to import page "${wxrPage.title}": ${error instanceof Error ? error.message : String(error)}`);
}
}
}
/**
* Convert HTML to Markdown using Turndown
*/
private convertToMarkdown(html: string): string {
if (!html || !html.trim()) return '';
let markdown = this.turndown.turndown(html);
// Unescape double-bracket macros that TurndownService escaped
// \[\[ becomes [[ and \]\] becomes ]]
markdown = markdown.replace(/\\\[\\\[/g, '[[').replace(/\\\]\\\]/g, ']]');
return markdown;
}
/**
* Transform WordPress shortcodes [shortcode] to [[shortcode]]
*/
private transformShortcodes(content: string): string {
return content.replace(WP_SHORTCODE_REGEX, '[[$1$2]]');
}
/**
* Resolve taxonomy items using the mapping
*/
private resolveTaxonomy(
items: string[],
mapping: Map<string, { resolved: string; needsCreation: boolean }>
): string[] {
return items.map(item => {
const key = item.toLowerCase();
const mapped = mapping.get(key);
return mapped ? mapped.resolved : key;
});
}
/**
* Safely convert a value to a Date object.
* Handles Date objects, ISO strings (from JSON serialization), and null/undefined.
*/
private toDate(value: Date | string | null | undefined): Date | null {
if (!value) return null;
if (value instanceof Date) {
return isNaN(value.getTime()) ? null : value;
}
if (typeof value === 'string') {
const parsed = new Date(value);
return isNaN(parsed.getTime()) ? null : parsed;
}
return null;
}
/**
* Calculate MD5 checksum of content
*/
private calculateChecksum(content: string): string {
return crypto.createHash('md5').update(content).digest('hex');
}
}
// Singleton instance
let importExecutionEngineInstance: ImportExecutionEngine | null = null;
export function getImportExecutionEngine(): ImportExecutionEngine {
if (!importExecutionEngineInstance) {
importExecutionEngineInstance = new ImportExecutionEngine();
}
return importExecutionEngineInstance;
}

View File

@@ -451,13 +451,17 @@ export class MediaEngine extends EventEmitter {
const id = uuidv4();
const now = new Date();
// Use provided createdAt date or current date
const createdAt = metadata?.createdAt ?? now;
const updatedAt = metadata?.updatedAt ?? now;
const sourceBuffer = await fs.readFile(sourcePath);
const originalName = path.basename(sourcePath);
const ext = path.extname(originalName);
const filename = `${id}${ext}`;
// Use date-based directory structure (media/YYYY/MM/)
const mediaDir = this.getMediaDirForDate(now);
// Use date-based directory structure (media/YYYY/MM/) based on createdAt
const mediaDir = this.getMediaDirForDate(createdAt);
await fs.mkdir(mediaDir, { recursive: true });
const destPath = path.join(mediaDir, filename);
@@ -490,8 +494,8 @@ export class MediaEngine extends EventEmitter {
height,
alt: metadata?.alt,
caption: metadata?.caption,
createdAt: now,
updatedAt: now,
createdAt,
updatedAt,
tags: metadata?.tags || [],
};

View File

@@ -100,8 +100,9 @@ export class PostEngine extends EventEmitter {
* Stores the stemmed content (combining title, excerpt, content, tags, categories).
* Includes project_id for project-scoped search.
* Only the post ID is returned from searches - actual post data comes from DB/files.
* Public to allow ImportExecutionEngine to index imported posts directly.
*/
private async updateFTSIndex(post: {
async updateFTSIndex(post: {
id: string;
projectId: string;
title: string;

View File

@@ -775,6 +775,101 @@ export function registerIpcHandlers(): void {
return result.filePaths[0];
});
// Helper to emit import execution progress events
const emitImportExecutionProgress = (
taskId: string,
phase: string,
current: number,
total: number,
detail?: string,
eta?: number
) => {
ipcMain.emit('forward-to-renderer', 'import:executionProgress', {
taskId,
phase,
current,
total,
detail,
eta,
});
};
safeHandle('import:execute', async (_, reportJson: string, uploadsFolder?: string) => {
const { ImportExecutionEngine } = await import('../engine/ImportExecutionEngine');
// Parse the report
const report = JSON.parse(reportJson) as import('../engine/ImportAnalysisEngine').ImportAnalysisReport;
// Set up project context
const projectEngine = getProjectEngine();
const activeProject = await projectEngine.getActiveProject();
// Calculate total items for ETA
// Note: 'update' and 'content-duplicate' statuses are SKIPPED during import, only 'new' and resolved conflicts are imported
const totalItems =
report.tags.filter(t => !t.existsInProject).length +
report.categories.filter(c => !c.existsInProject).length +
report.posts.items.filter(p => p.status === 'new' || (p.status === 'conflict' && p.conflictResolution && p.conflictResolution !== 'ignore')).length +
report.media.items.filter(m => m.status === 'new').length +
report.pages.items.filter(p => p.status === 'new' || (p.status === 'conflict' && p.conflictResolution && p.conflictResolution !== 'ignore')).length;
// Create a task for the import
const taskId = `import-${Date.now()}`;
let processedItems = 0;
let startTime = Date.now();
const task = {
id: taskId,
name: `Import from ${report.site.title || 'WordPress'}`,
execute: async (onProgress: (progress: number, message: string) => void) => {
const executionEngine = new ImportExecutionEngine();
if (activeProject) {
executionEngine.setProjectContext(activeProject.id, activeProject.dataPath);
}
const result = await executionEngine.executeImport(report, {
uploadsFolder,
onProgress: (phase, current, total, detail) => {
// Update processed items count based on phase progress
processedItems++;
// Calculate ETA
const elapsed = Date.now() - startTime;
const itemsPerMs = processedItems / elapsed;
const remainingItems = totalItems - processedItems;
const etaMs = itemsPerMs > 0 ? remainingItems / itemsPerMs : 0;
// Calculate overall progress percentage
const overallProgress = totalItems > 0
? Math.round((processedItems / totalItems) * 100)
: 0;
// Report to TaskManager
onProgress(overallProgress, `${phase}: ${detail || `${current}/${total}`}`);
// Also emit detailed progress for UI
emitImportExecutionProgress(taskId, phase, current, total, detail, etaMs);
},
});
// Convert Map to plain object for serialization
const serializedResult = {
...result,
wpIdToPostId: Object.fromEntries(result.wpIdToPostId),
};
return serializedResult;
},
};
// Run the task - this returns immediately with a promise
const resultPromise = taskManager.runTask(task);
// Return task ID so UI can track it
return { taskId, totalItems };
});
// ============ Import Definition CRUD Handlers ============
safeHandle('importDefinitions:create', async (_, name?: string) => {

View File

@@ -130,11 +130,31 @@ contextBridge.exposeInMainWorld('electronAPI', {
selectAndAnalyze: (uploadsFolder?: string) => ipcRenderer.invoke('import:selectAndAnalyze', uploadsFolder),
analyzeFile: (filePath: string, uploadsFolder?: string) => ipcRenderer.invoke('import:analyzeFile', filePath, uploadsFolder),
selectUploadsFolder: () => ipcRenderer.invoke('import:selectUploadsFolder'),
execute: (reportJson: string, uploadsFolder?: string) => ipcRenderer.invoke('import:execute', reportJson, uploadsFolder),
onProgress: (callback: (data: { step: string; detail?: string }) => void) => {
const subscription = (_event: Electron.IpcRendererEvent, data: { step: string; detail?: string }) => callback(data);
ipcRenderer.on('import:progress', subscription);
return () => ipcRenderer.removeListener('import:progress', subscription);
},
onExecutionProgress: (callback: (data: {
taskId: string;
phase: string;
current: number;
total: number;
detail?: string;
eta?: number;
}) => void) => {
const subscription = (_event: Electron.IpcRendererEvent, data: {
taskId: string;
phase: string;
current: number;
total: number;
detail?: string;
eta?: number;
}) => callback(data);
ipcRenderer.on('import:executionProgress', subscription);
return () => ipcRenderer.removeListener('import:executionProgress', subscription);
},
},
// Import Definition CRUD
@@ -314,7 +334,16 @@ export interface ElectronAPI {
selectAndAnalyze: (uploadsFolder?: string) => Promise<unknown>;
analyzeFile: (filePath: string, uploadsFolder?: string) => Promise<unknown>;
selectUploadsFolder: () => Promise<string | null>;
execute: (reportJson: string, uploadsFolder?: string) => Promise<{ taskId: string; totalItems: number }>;
onProgress: (callback: (data: { step: string; detail?: string }) => void) => () => void;
onExecutionProgress: (callback: (data: {
taskId: string;
phase: string;
current: number;
total: number;
detail?: string;
eta?: number;
}) => void) => () => void;
};
importDefinitions: {
create: (name?: string) => Promise<unknown>;

View File

@@ -1016,4 +1016,259 @@
.resolution-select option {
background: var(--vscode-dropdown-listBackground, var(--vscode-dropdown-background));
color: var(--vscode-dropdown-foreground);
}
/* Import Execution Section */
.import-execute-section {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px;
background: var(--vscode-sideBar-background);
border-radius: 6px;
border: 1px solid var(--vscode-editorWidget-border, transparent);
}
.import-execute-summary {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--vscode-descriptionForeground);
}
.import-count-tag {
background: var(--vscode-badge-background);
color: var(--vscode-badge-foreground);
padding: 2px 8px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
}
.import-execute-btn {
padding: 10px 24px;
font-size: 14px;
font-weight: 600;
border: none;
border-radius: 4px;
cursor: pointer;
background: var(--vscode-button-background);
color: var(--vscode-button-foreground);
white-space: nowrap;
}
.import-execute-btn:hover {
background: var(--vscode-button-hoverBackground);
}
.import-execute-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Import Execution Progress */
.import-execution-progress {
padding: 16px;
background: var(--vscode-sideBar-background);
border-radius: 6px;
border: 1px solid var(--vscode-editorWidget-border, transparent);
}
.import-execution-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.import-execution-header h3 {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--vscode-foreground);
}
.import-eta {
font-size: 12px;
color: var(--vscode-descriptionForeground);
}
.import-progress-bar {
height: 6px;
background: var(--vscode-progressBar-background, #0e639c);
border-radius: 3px;
overflow: hidden;
margin-bottom: 10px;
opacity: 0.3;
}
.import-progress-fill {
height: 100%;
background: var(--vscode-button-background);
border-radius: 3px;
transition: width 0.3s ease;
}
.import-progress-info {
display: flex;
align-items: center;
gap: 12px;
font-size: 12px;
}
.import-phase {
font-weight: 600;
color: var(--vscode-foreground);
}
.import-detail {
flex: 1;
color: var(--vscode-descriptionForeground);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.import-counter {
color: var(--vscode-descriptionForeground);
font-variant-numeric: tabular-nums;
}
/* Execution Complete */
.import-execution-complete {
display: flex;
align-items: center;
gap: 10px;
padding: 16px;
background: var(--vscode-inputValidation-infoBackground, rgba(0, 127, 212, 0.1));
border: 1px solid var(--vscode-inputValidation-infoBorder, #007fd4);
border-radius: 6px;
color: var(--vscode-foreground);
font-size: 13px;
font-weight: 500;
}
.import-execution-complete svg {
fill: var(--vscode-charts-green, #89d185);
flex-shrink: 0;
}
/* Execution Error */
.import-execution-error {
display: flex;
align-items: center;
gap: 10px;
padding: 16px;
background: var(--vscode-inputValidation-errorBackground, rgba(243, 70, 70, 0.1));
border: 1px solid var(--vscode-inputValidation-errorBorder, #f34646);
border-radius: 6px;
color: var(--vscode-foreground);
font-size: 13px;
}
.import-execution-error svg {
fill: var(--vscode-errorForeground, #f34646);
flex-shrink: 0;
}
/* Date Distribution Card */
.import-date-distribution {
background: var(--vscode-sideBar-background);
border-radius: 6px;
padding: 16px;
border: 1px solid var(--vscode-editorWidget-border, transparent);
}
.import-date-distribution h3 {
margin: 0 0 12px 0;
font-size: 13px;
font-weight: 600;
color: var(--vscode-foreground);
}
.distribution-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.distribution-column {
display: flex;
flex-direction: column;
gap: 8px;
}
.distribution-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 6px;
border-bottom: 1px solid var(--vscode-editorWidget-border, #3c3c3c);
}
.distribution-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--vscode-descriptionForeground);
}
.distribution-total {
font-size: 11px;
color: var(--vscode-descriptionForeground);
}
.distribution-bars {
display: flex;
flex-direction: column;
gap: 4px;
}
.distribution-row {
display: flex;
align-items: center;
gap: 8px;
height: 20px;
}
.distribution-year {
font-size: 11px;
font-variant-numeric: tabular-nums;
color: var(--vscode-foreground);
min-width: 36px;
text-align: right;
}
.distribution-bar-container {
flex: 1;
height: 12px;
background: var(--vscode-input-background);
border-radius: 2px;
overflow: hidden;
}
.distribution-bar {
height: 100%;
border-radius: 2px;
min-width: 2px;
transition: width 0.3s ease;
}
.distribution-bar-posts {
background: var(--vscode-charts-blue, #75beff);
}
.distribution-bar-media {
background: var(--vscode-charts-green, #89d185);
}
.distribution-count {
font-size: 11px;
font-variant-numeric: tabular-nums;
color: var(--vscode-descriptionForeground);
min-width: 32px;
text-align: right;
}

View File

@@ -130,6 +130,30 @@ interface ImportAnalysisViewProps {
definitionId: string;
}
interface ImportExecutionState {
isExecuting: boolean;
taskId: string | null;
phase: string;
current: number;
total: number;
detail: string;
eta: number | null;
completed: boolean;
error: string | null;
}
const formatEta = (etaMs: number): string => {
if (etaMs <= 0) return '';
const seconds = Math.ceil(etaMs / 1000);
if (seconds < 60) return `~${seconds}s remaining`;
const minutes = Math.floor(seconds / 60);
const secs = seconds % 60;
if (minutes < 60) return `~${minutes}m ${secs}s remaining`;
const hours = Math.floor(minutes / 60);
const mins = minutes % 60;
return `~${hours}h ${mins}m remaining`;
};
export const ImportAnalysisView: React.FC<ImportAnalysisViewProps> = ({ definitionId }) => {
const [name, setName] = useState('Untitled Import');
const [uploadsFolder, setUploadsFolder] = useState<string | null>(null);
@@ -140,6 +164,17 @@ export const ImportAnalysisView: React.FC<ImportAnalysisViewProps> = ({ definiti
const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({});
const [progressStep, setProgressStep] = useState<string>('');
const [progressDetail, setProgressDetail] = useState<string>('');
const [executionState, setExecutionState] = useState<ImportExecutionState>({
isExecuting: false,
taskId: null,
phase: '',
current: 0,
total: 0,
detail: '',
eta: null,
completed: false,
error: null,
});
const nameInputRef = useRef<HTMLInputElement>(null);
// Subscribe to progress events
@@ -151,6 +186,46 @@ export const ImportAnalysisView: React.FC<ImportAnalysisViewProps> = ({ definiti
return () => unsubscribe?.();
}, []);
// Subscribe to execution progress events
useEffect(() => {
const unsubscribe = window.electronAPI?.import.onExecutionProgress(({ taskId, phase, current, total, detail, eta }) => {
setExecutionState(prev => {
if (prev.taskId !== taskId) return prev;
return {
...prev,
phase,
current,
total,
detail: detail || '',
eta: eta ?? null,
};
});
});
return () => unsubscribe?.();
}, []);
// Subscribe to task completion events
useEffect(() => {
const unsubscribe = window.electronAPI?.on('task:completed', (task: { taskId: string }) => {
setExecutionState(prev => {
if (prev.taskId !== task.taskId) return prev;
return { ...prev, isExecuting: false, completed: true };
});
});
return () => unsubscribe?.();
}, []);
// Subscribe to task failure events
useEffect(() => {
const unsubscribe = window.electronAPI?.on('task:failed', (task: { taskId: string; error: string }) => {
setExecutionState(prev => {
if (prev.taskId !== task.taskId) return prev;
return { ...prev, isExecuting: false, error: task.error };
});
});
return () => unsubscribe?.();
}, []);
// Save the current report to the definition
const persistReport = useCallback(async (updatedReport: AnalysisReport) => {
await window.electronAPI?.importDefinitions.update(definitionId, {
@@ -295,6 +370,104 @@ export const ImportAnalysisView: React.FC<ImportAnalysisViewProps> = ({ definiti
}
}, [definitionId, uploadsFolder]);
const handleExecuteImport = useCallback(async () => {
if (!report) return;
// Reset execution state
setExecutionState({
isExecuting: true,
taskId: null,
phase: 'Starting...',
current: 0,
total: 0,
detail: '',
eta: null,
completed: false,
error: null,
});
try {
const result = await window.electronAPI?.import.execute(
JSON.stringify(report),
uploadsFolder || undefined
);
if (result) {
setExecutionState(prev => ({
...prev,
taskId: result.taskId,
total: result.totalItems,
}));
}
} catch (error) {
console.error('Import execution failed:', error);
setExecutionState(prev => ({
...prev,
isExecuting: false,
error: error instanceof Error ? error.message : 'Unknown error',
}));
}
}, [report, uploadsFolder]);
// Calculate how many items will be imported
// Note: 'update' and 'content-duplicate' are SKIPPED - only 'new' and resolved conflicts are imported
const getImportableCount = useCallback(() => {
if (!report) return { posts: 0, media: 0, pages: 0, tags: 0 };
const postsToImport = report.posts.items.filter(p =>
p.status === 'new' ||
(p.status === 'conflict' && p.conflictResolution && p.conflictResolution !== 'ignore')
).length;
const mediaToImport = report.media.items.filter(m =>
m.status === 'new'
).length;
const pagesToImport = report.pages.items.filter(p =>
p.status === 'new' ||
(p.status === 'conflict' && p.conflictResolution && p.conflictResolution !== 'ignore')
).length;
const tagsToImport = report.tags.filter(t => !t.existsInProject).length +
report.categories.filter(c => !c.existsInProject).length;
return { posts: postsToImport, media: mediaToImport, pages: pagesToImport, tags: tagsToImport };
}, [report]);
// Calculate date distribution for posts and media
const getDateDistribution = useCallback(() => {
if (!report) return { posts: {}, media: {} };
const postsDistrib: Record<number, number> = {};
const mediaDistrib: Record<number, number> = {};
for (const item of report.posts.items) {
const date = item.wxrPost.postDate || item.wxrPost.pubDate;
if (date) {
const year = new Date(date).getFullYear();
postsDistrib[year] = (postsDistrib[year] || 0) + 1;
}
}
for (const item of report.pages.items) {
const date = item.wxrPost.postDate || item.wxrPost.pubDate;
if (date) {
const year = new Date(date).getFullYear();
postsDistrib[year] = (postsDistrib[year] || 0) + 1;
}
}
for (const item of report.media.items) {
const date = item.wxrMedia.pubDate;
if (date) {
const year = new Date(date).getFullYear();
mediaDistrib[year] = (mediaDistrib[year] || 0) + 1;
}
}
return { posts: postsDistrib, media: mediaDistrib };
}, [report]);
const toggleSection = useCallback((section: string) => {
setExpandedSections(prev => ({ ...prev, [section]: !prev[section] }));
}, []);
@@ -371,6 +544,76 @@ export const ImportAnalysisView: React.FC<ImportAnalysisViewProps> = ({ definiti
<>
<SiteInfoCard site={report.site} sourceFile={report.sourceFile} />
<StatCards report={report} />
<DateDistributionCard distribution={getDateDistribution()} />
{/* Execution Progress */}
{executionState.isExecuting && (
<div className="import-execution-progress">
<div className="import-execution-header">
<h3>Importing...</h3>
{executionState.eta !== null && executionState.eta > 0 && (
<span className="import-eta">{formatEta(executionState.eta)}</span>
)}
</div>
<div className="import-progress-bar">
<div
className="import-progress-fill"
style={{ width: `${executionState.total > 0 ? (executionState.current / executionState.total) * 100 : 0}%` }}
/>
</div>
<div className="import-progress-info">
<span className="import-phase">{executionState.phase}</span>
{executionState.detail && <span className="import-detail">{executionState.detail}</span>}
<span className="import-counter">{executionState.current} / {executionState.total}</span>
</div>
</div>
)}
{/* Execution Complete */}
{executionState.completed && (
<div className="import-execution-complete">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
</svg>
<span>Import completed successfully!</span>
</div>
)}
{/* Execution Error */}
{executionState.error && (
<div className="import-execution-error">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
</svg>
<span>Import failed: {executionState.error}</span>
</div>
)}
{/* Execute Button */}
{!executionState.isExecuting && !executionState.completed && (
(() => {
const counts = getImportableCount();
const totalImportable = counts.posts + counts.media + counts.pages + counts.tags;
return (
<div className="import-execute-section">
<div className="import-execute-summary">
Ready to import:
{counts.tags > 0 && <span className="import-count-tag">{counts.tags} tags/categories</span>}
{counts.posts > 0 && <span className="import-count-tag">{counts.posts} posts</span>}
{counts.media > 0 && <span className="import-count-tag">{counts.media} media</span>}
{counts.pages > 0 && <span className="import-count-tag">{counts.pages} pages</span>}
</div>
<button
className="import-execute-btn"
onClick={handleExecuteImport}
disabled={totalImportable === 0}
>
{totalImportable === 0 ? 'Nothing to Import' : `Import ${totalImportable} Items`}
</button>
</div>
);
})()
)}
{report.posts.conflicts > 0 && (
<ConflictsSection
@@ -588,6 +831,82 @@ const StatCards: React.FC<{ report: AnalysisReport }> = ({ report }) => {
);
};
interface DateDistribution {
posts: Record<number, number>;
media: Record<number, number>;
}
const DateDistributionCard: React.FC<{ distribution: DateDistribution }> = ({ distribution }) => {
const postYears = Object.keys(distribution.posts).map(Number).sort();
const mediaYears = Object.keys(distribution.media).map(Number).sort();
const allYears = [...new Set([...postYears, ...mediaYears])].sort();
if (allYears.length === 0) {
return null;
}
const maxPostCount = Math.max(...Object.values(distribution.posts), 1);
const maxMediaCount = Math.max(...Object.values(distribution.media), 1);
const totalPosts = Object.values(distribution.posts).reduce((a, b) => a + b, 0);
const totalMedia = Object.values(distribution.media).reduce((a, b) => a + b, 0);
return (
<div className="import-date-distribution">
<h3>Date Distribution</h3>
<div className="distribution-grid">
<div className="distribution-column">
<div className="distribution-header">
<span className="distribution-label">Posts/Pages</span>
<span className="distribution-total">{totalPosts} total</span>
</div>
<div className="distribution-bars">
{allYears.map(year => {
const count = distribution.posts[year] || 0;
const percentage = (count / maxPostCount) * 100;
return (
<div key={`post-${year}`} className="distribution-row">
<span className="distribution-year">{year}</span>
<div className="distribution-bar-container">
<div
className="distribution-bar distribution-bar-posts"
style={{ width: `${percentage}%` }}
/>
</div>
<span className="distribution-count">{count || '-'}</span>
</div>
);
})}
</div>
</div>
<div className="distribution-column">
<div className="distribution-header">
<span className="distribution-label">Media</span>
<span className="distribution-total">{totalMedia} total</span>
</div>
<div className="distribution-bars">
{allYears.map(year => {
const count = distribution.media[year] || 0;
const percentage = (count / maxMediaCount) * 100;
return (
<div key={`media-${year}`} className="distribution-row">
<span className="distribution-year">{year}</span>
<div className="distribution-bar-container">
<div
className="distribution-bar distribution-bar-media"
style={{ width: `${percentage}%` }}
/>
</div>
<span className="distribution-count">{count || '-'}</span>
</div>
);
})}
</div>
</div>
</div>
</div>
);
};
// Helper function to format post metadata for tooltip (new post from WXR)
function formatPostTooltip(wxrPost: AnalyzedPostItem['wxrPost']): string {
const lines: string[] = [];

View File

@@ -1,5 +1,19 @@
// Type definitions for the Electron API exposed via preload
export interface ImportExecuteResult {
taskId: string;
totalItems: number;
}
export interface ImportExecutionProgress {
taskId: string;
phase: string;
current: number;
total: number;
detail?: string;
eta?: number;
}
export interface ImportDefinitionData {
id: string;
projectId: string;
@@ -365,7 +379,9 @@ export interface ElectronAPI {
selectAndAnalyze: (uploadsFolder?: string) => Promise<unknown>;
analyzeFile: (filePath: string, uploadsFolder?: string) => Promise<unknown>;
selectUploadsFolder: () => Promise<string | null>;
execute: (reportJson: string, uploadsFolder?: string) => Promise<ImportExecuteResult>;
onProgress: (callback: (data: { step: string; detail?: string }) => void) => () => void;
onExecutionProgress: (callback: (data: ImportExecutionProgress) => void) => () => void;
};
importDefinitions: {
create: (name?: string) => Promise<ImportDefinitionData>;