@assistkick/create 1.9.0 → 1.11.0

package/templates/assistkick-product-system/packages/backend/src/services/ssh_key_service.test.ts

@@ -2,7 +2,9 @@ import { describe, it, mock, beforeEach, afterEach } from 'node:test';
 import assert from 'node:assert/strict';
 import { SshKeyService } from './ssh_key_service.ts';
 import { existsSync } from 'node:fs';
-import { readFile } from 'node:fs/promises';
+import { readFile, rm, mkdtemp } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
 
 // 32-byte key as 64-char hex string
 const TEST_ENCRYPTION_KEY = 'a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4e5f6a1b2';
@@ -91,7 +93,7 @@ describe('SshKeyService', () => {
       process.env.ENCRYPTION_KEY = 'tooshort';
       const service = createService();
 
-      assert.throws(() => service.encrypt('test'), /64-character hex/);
+      assert.throws(() => service.encrypt('test'), /at least 32 characters/);
     });
 
     it('fails to decrypt with tampered ciphertext', () => {
@@ -108,21 +110,38 @@ describe('SshKeyService', () => {
   });
 
   describe('writeTempKeyFile / removeTempKeyFile', () => {
-    it('writes a temp file with correct content and permissions', async () => {
+    it('writes a temp file converting PKCS8 to OpenSSH format', async () => {
       const service = createService();
-      const content = '-----BEGIN PRIVATE KEY-----\ntest\n-----END PRIVATE KEY-----';
+      const keyPair = service.generateKeyPair();
 
-      const filepath = await service.writeTempKeyFile(content);
+      const filepath = await service.writeTempKeyFile(keyPair.privateKey);
 
       assert.ok(existsSync(filepath));
       const written = await readFile(filepath, 'utf8');
-      assert.equal(written, content);
+      assert.ok(written.includes('-----BEGIN OPENSSH PRIVATE KEY-----'));
+      assert.ok(written.includes('-----END OPENSSH PRIVATE KEY-----'));
 
       // Clean up
       await service.removeTempKeyFile(filepath);
       assert.ok(!existsSync(filepath));
     });
 
+    it('passes through keys already in OpenSSH format', async () => {
+      const service = createService();
+      const keyPair = service.generateKeyPair();
+
+      // Write once to get OpenSSH format, then write again
+      const firstPath = await service.writeTempKeyFile(keyPair.privateKey);
+      const opensshKey = await readFile(firstPath, 'utf8');
+      await service.removeTempKeyFile(firstPath);
+
+      const secondPath = await service.writeTempKeyFile(opensshKey);
+      const written = await readFile(secondPath, 'utf8');
+      assert.equal(written, opensshKey);
+
+      await service.removeTempKeyFile(secondPath);
+    });
+
     it('removeTempKeyFile does not throw for non-existent file', async () => {
       const service = createService();
       // Should not throw
@@ -141,6 +160,58 @@ describe('SshKeyService', () => {
     });
   });
 
+  describe('installKeyForCli', () => {
+    it('writes private key, public key, and ssh config to a temp HOME/.ssh/', async () => {
+      const service = createService();
+      const keyPair = service.generateKeyPair();
+
+      // Use a temp dir as fake HOME so we don't clobber real ~/.ssh
+      const fakeHome = await mkdtemp(join(tmpdir(), 'ssh-test-'));
+      const origHome = process.env.HOME;
+      process.env.HOME = fakeHome;
+
+      try {
+        await service.installKeyForCli(keyPair);
+
+        const sshDir = join(fakeHome, '.ssh');
+        const privKey = await readFile(join(sshDir, 'ssh_id_ed25519'), 'utf8');
+        const pubKey = await readFile(join(sshDir, 'ssh_id_ed25519.pub'), 'utf8');
+        const config = await readFile(join(sshDir, 'config'), 'utf8');
+
+        assert.ok(privKey.includes('BEGIN OPENSSH PRIVATE KEY'));
+        assert.ok(pubKey.startsWith('ssh-ed25519 '));
+        assert.ok(pubKey.includes('assistkick-deploy'));
+        assert.ok(config.includes('Host github.com'));
+        assert.ok(config.includes('ssh_id_ed25519'));
+      } finally {
+        process.env.HOME = origHome;
+        await rm(fakeHome, { recursive: true });
+      }
+    });
+
+    it('replaces existing github.com block in ssh config', async () => {
+      const service = createService();
+      const keyPair = service.generateKeyPair();
+
+      const fakeHome = await mkdtemp(join(tmpdir(), 'ssh-test-'));
+      const origHome = process.env.HOME;
+      process.env.HOME = fakeHome;
+
+      try {
+        // Install twice — second should replace, not duplicate
+        await service.installKeyForCli(keyPair);
+        await service.installKeyForCli(keyPair);
+
+        const config = await readFile(join(fakeHome, '.ssh', 'config'), 'utf8');
+        const matches = config.match(/Host github\.com/g);
+        assert.equal(matches?.length, 1, 'should have exactly one Host github.com block');
+      } finally {
+        process.env.HOME = origHome;
+        await rm(fakeHome, { recursive: true });
+      }
+    });
+  });
+
   describe('isConfigured', () => {
     it('returns true when ENCRYPTION_KEY is valid', () => {
       const service = createService();

package/templates/assistkick-product-system/packages/backend/src/services/ssh_key_service.ts

@@ -3,9 +3,9 @@
  * with AES-256-GCM, and manages temporary key files for git operations.
  */
 
-import { generateKeyPairSync, createCipheriv, createDecipheriv, randomBytes } from 'node:crypto';
-import { writeFile, unlink, chmod } from 'node:fs/promises';
-import { tmpdir } from 'node:os';
+import { generateKeyPairSync, createCipheriv, createDecipheriv, randomBytes, createPrivateKey, createPublicKey } from 'node:crypto';
+import { writeFile, unlink, chmod, mkdir, readFile } from 'node:fs/promises';
+import { tmpdir, homedir } from 'node:os';
 import { join } from 'node:path';
 
 interface SshKeyServiceDeps {
@@ -30,15 +30,29 @@ export class SshKeyService {
     this.log = log;
   }
 
+  static readonly KEY_HELP = 'Set ENCRYPTION_KEY in your .env file (any string with at least 32 characters). Generate one with: openssl rand -hex 32';
+
+  /** Parse ENCRYPTION_KEY: try hex first, then base64, then use raw UTF-8 bytes via SHA-256. */
   private getEncryptionKey = (): Buffer => {
     const key = process.env.ENCRYPTION_KEY;
-    if (!key) throw new Error('ENCRYPTION_KEY environment variable is not set');
-    // Expect a 64-char hex string (32 bytes)
-    const buf = Buffer.from(key, 'hex');
-    if (buf.length !== 32) {
-      throw new Error('ENCRYPTION_KEY must be a 64-character hex string (32 bytes for AES-256)');
+    if (!key) {
+      throw new Error(`ENCRYPTION_KEY environment variable is not set. ${SshKeyService.KEY_HELP}`);
+    }
+    if (key.length < 32) {
+      throw new Error(`ENCRYPTION_KEY must be at least 32 characters. ${SshKeyService.KEY_HELP}`);
+    }
+    // Try hex (64-char hex = 32 bytes)
+    if (/^[0-9a-fA-F]{64}$/.test(key)) {
+      return Buffer.from(key, 'hex');
     }
-    return buf;
+    // Try base64 (44 chars with padding = 32 bytes)
+    if (/^[A-Za-z0-9+/]{43}=?$/.test(key)) {
+      const buf = Buffer.from(key, 'base64');
+      if (buf.length === 32) return buf;
+    }
+    // Fallback: SHA-256 hash of the raw string to get exactly 32 bytes
+    const { createHash } = require('node:crypto');
+    return createHash('sha256').update(key).digest();
   };
 
   /** Generate an ED25519 SSH keypair. */
@@ -113,12 +127,80 @@ export class SshKeyService {
     return plaintext;
   };
 
+  /**
+   * Convert a PKCS8 PEM private key to OpenSSH format.
+   * Many OpenSSH builds can't read PKCS8 PEM for ED25519, so we convert
+   * to the native OpenSSH private key format that all versions support.
+   */
+  private pkcs8ToOpenSsh = (pkcs8Pem: string): string => {
+    const privKeyObj = createPrivateKey(pkcs8Pem);
+    const pubKeyObj = createPublicKey(privKeyObj);
+
+    const privDer = privKeyObj.export({ type: 'pkcs8', format: 'der' });
+    const pubDer = pubKeyObj.export({ type: 'spki', format: 'der' });
+
+    // ED25519 PKCS8 DER: seed (32 bytes) at offset 16
+    // ED25519 SPKI DER: public key (32 bytes) at offset 12
+    const seed = Buffer.from(privDer.subarray(16, 48));
+    const rawPubKey = Buffer.from(pubDer.subarray(12, 44));
+
+    const sshStr = (buf: Buffer): Buffer => {
+      const len = Buffer.alloc(4);
+      len.writeUInt32BE(buf.length);
+      return Buffer.concat([len, buf]);
+    };
+    const uint32 = (n: number): Buffer => {
+      const b = Buffer.alloc(4);
+      b.writeUInt32BE(n);
+      return b;
+    };
+
+    const keyType = Buffer.from('ssh-ed25519');
+    const pubBlob = Buffer.concat([sshStr(keyType), sshStr(rawPubKey)]);
+
+    const checkBytes = randomBytes(4);
+    const privSection = Buffer.concat([
+      checkBytes,
+      checkBytes,
+      sshStr(keyType),
+      sshStr(rawPubKey),
+      sshStr(Buffer.concat([seed, rawPubKey])), // 64-byte private key: seed + pubkey
+      sshStr(Buffer.alloc(0)), // empty comment
+    ]);
+
+    // Pad to 8-byte block alignment (1, 2, 3, ...)
+    const padNeeded = (8 - (privSection.length % 8)) % 8;
+    const padding = Buffer.alloc(padNeeded);
+    for (let i = 0; i < padNeeded; i++) padding[i] = i + 1;
+
+    const blob = Buffer.concat([
+      Buffer.from('openssh-key-v1\0'),
+      sshStr(Buffer.from('none')),    // cipher
+      sshStr(Buffer.from('none')),    // kdf
+      sshStr(Buffer.alloc(0)),        // kdf options
+      uint32(1),                      // number of keys
+      sshStr(pubBlob),
+      sshStr(Buffer.concat([privSection, padding])),
+    ]);
+
+    const b64 = blob.toString('base64');
+    const lines = b64.match(/.{1,70}/g) || [];
+    return `-----BEGIN OPENSSH PRIVATE KEY-----\n${lines.join('\n')}\n-----END OPENSSH PRIVATE KEY-----\n`;
+  };
+
+  /** Ensure a private key is in OpenSSH format (convert from PKCS8 if needed). */
+  private ensureOpenSshFormat = (privateKeyPem: string): string => {
+    if (privateKeyPem.includes('BEGIN OPENSSH PRIVATE KEY')) return privateKeyPem;
+    return this.pkcs8ToOpenSsh(privateKeyPem);
+  };
+
   /** Write an SSH private key to a temporary file with restricted permissions. Returns the file path. */
   writeTempKeyFile = async (privateKeyPem: string): Promise<string> => {
+    const opensshKey = this.ensureOpenSshFormat(privateKeyPem);
     const filename = `assistkick_ssh_${randomBytes(8).toString('hex')}`;
     const filepath = join(tmpdir(), filename);
 
-    await writeFile(filepath, privateKeyPem, { mode: 0o600 });
+    await writeFile(filepath, opensshKey, { mode: 0o600 });
     await chmod(filepath, 0o600);
     this.log('SSH', `Temporary key file created: ${filepath}`);
     return filepath;
@@ -129,8 +211,8 @@ export class SshKeyService {
     try {
       await unlink(filepath);
       this.log('SSH', `Temporary key file removed: ${filepath}`);
-    } catch {
-      this.log('SSH', `Failed to remove temp key file (non-fatal): ${filepath}`);
+    } catch (err: any) {
+      this.log('SSH', `Failed to remove temp key file (non-fatal): ${filepath}`, err.message);
     }
   };
 
@@ -139,10 +221,63 @@ export class SshKeyService {
     return `ssh -i ${keyFilePath} -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null`;
   };
 
+  /**
+   * Install an SSH keypair to ~/.ssh/ so the CLI git can use the same key
+   * as the app. Writes the private key, public key, and ensures ~/.ssh/config
+   * routes github.com through the installed key.
+   */
+  installKeyForCli = async (keyPair: SshKeyPair): Promise<void> => {
+    const sshDir = join(homedir(), '.ssh');
+    const privPath = join(sshDir, 'ssh_id_ed25519');
+    const pubPath = join(sshDir, 'ssh_id_ed25519.pub');
+    const configPath = join(sshDir, 'config');
+
+    await mkdir(sshDir, { recursive: true, mode: 0o700 });
+
+    // Write private key in OpenSSH format
+    const opensshKey = this.ensureOpenSshFormat(keyPair.privateKey);
+    await writeFile(privPath, opensshKey, { mode: 0o600 });
+    await chmod(privPath, 0o600);
+
+    // Write public key with comment
+    await writeFile(pubPath, `${keyPair.publicKey} assistkick-deploy\n`, { mode: 0o644 });
+
+    // Ensure ~/.ssh/config has a github.com Host entry pointing to our key
+    const hostBlock = [
+      'Host github.com',
+      '  HostName github.com',
+      '  User git',
+      `  IdentityFile ${privPath}`,
+      '  StrictHostKeyChecking no',
+    ].join('\n');
+
+    let existingConfig = '';
+    try {
+      existingConfig = await readFile(configPath, 'utf8');
+    } catch {
+      // No config file yet
+    }
+
+    if (existingConfig.includes('Host github.com')) {
+      // Replace existing github.com block (everything from "Host github.com" to next "Host " or EOF)
+      const replaced = existingConfig.replace(
+        /Host github\.com[\s\S]*?(?=\nHost |\s*$)/,
+        hostBlock,
+      );
+      await writeFile(configPath, replaced, { mode: 0o600 });
+    } else {
+      const newConfig = existingConfig.trim()
+        ? `${existingConfig.trimEnd()}\n\n${hostBlock}\n`
+        : `${hostBlock}\n`;
+      await writeFile(configPath, newConfig, { mode: 0o600 });
+    }
+
+    this.log('SSH', `Installed SSH key for CLI use at ${privPath}`);
+  };
+
   /** Check whether ENCRYPTION_KEY is configured. */
   isConfigured = (): boolean => {
     const key = process.env.ENCRYPTION_KEY;
-    if (!key) return false;
-    return Buffer.from(key, 'hex').length === 32;
+    return !!key && key.length >= 32;
   };
 }

package/templates/assistkick-product-system/packages/backend/src/services/terminal_ws_handler.ts

@@ -128,7 +128,8 @@ export class TerminalWsHandler {
       let msg: TerminalMessage;
       try {
         msg = JSON.parse(typeof raw === 'string' ? raw : raw.toString());
-      } catch {
+      } catch (err: any) {
+        this.log('TERMINAL', `Failed to parse WS message: ${err.message}`);
         return;
       }
 

package/templates/assistkick-product-system/packages/backend/src/services/title_generator_service.test.ts

@@ -0,0 +1,45 @@
+import { describe, it, mock, beforeEach } from 'node:test';
+import assert from 'node:assert/strict';
+import { TitleGeneratorService } from './title_generator_service.ts';
+
+describe('TitleGeneratorService', () => {
+  let service: TitleGeneratorService;
+  const log = mock.fn();
+
+  beforeEach(() => {
+    log.mock.resetCalls();
+    service = new TitleGeneratorService({ log });
+  });
+
+  describe('isDefaultName', () => {
+    it('returns true for default timestamp names', () => {
+      assert.equal(service.isDefaultName('Chat 17/03/26 14:30'), true);
+      assert.equal(service.isDefaultName('Chat 01/01/26 00:00'), true);
+      assert.equal(service.isDefaultName('Chat 31/12/25 23:59'), true);
+    });
+
+    it('returns false for custom names', () => {
+      assert.equal(service.isDefaultName('My Custom Chat'), false);
+      assert.equal(service.isDefaultName('Debugging Auth Issue'), false);
+      assert.equal(service.isDefaultName('Chat about React'), false);
+    });
+
+    it('returns false for names that partially match the pattern', () => {
+      assert.equal(service.isDefaultName('Chat 17/03/26 14:30 extra'), false);
+      assert.equal(service.isDefaultName('Chat 17/03/26'), false);
+      assert.equal(service.isDefaultName('chat 17/03/26 14:30'), false);
+    });
+  });
+
+  describe('generateTitle', () => {
+    it('completes without hanging and returns a string or null', async () => {
+      // With stdio: ['ignore', ...] the CLI no longer blocks on piped stdin.
+      // It either returns a valid title or null if the CLI is unavailable.
+      const result = await service.generateTitle('hello', '[]');
+      assert.ok(
+        result === null || typeof result === 'string',
+        `Expected null or string, got ${typeof result}: ${result}`,
+      );
+    });
+  });
+});

package/templates/assistkick-product-system/packages/backend/src/services/title_generator_service.ts

@@ -0,0 +1,157 @@
+/**
+ * TitleGeneratorService — generates short chat session titles using Claude Haiku.
+ *
+ * Spawns the Claude CLI in one-shot mode with claude-haiku-4-5 to produce
+ * a 3-10 word title from the conversation's first user message and assistant reply.
+ * Runs fire-and-forget so it never blocks the main chat stream.
+ */
+
+import { spawn } from 'node:child_process';
+
+const DEFAULT_NAME_REGEX = /^Chat \d{2}\/\d{2}\/\d{2} \d{2}:\d{2}$/;
+
+interface TitleGeneratorServiceDeps {
+  log: (tag: string, ...args: unknown[]) => void;
+}
+
+export class TitleGeneratorService {
+  private readonly log: TitleGeneratorServiceDeps['log'];
+
+  constructor({ log }: TitleGeneratorServiceDeps) {
+    this.log = log;
+  }
+
+  /**
+   * Check whether a session name is still the default timestamp-based name.
+   */
+  isDefaultName = (name: string): boolean => {
+    return DEFAULT_NAME_REGEX.test(name);
+  };
+
+  /**
+   * Generate a short title for a chat session based on conversation content.
+   * Returns the generated title (3-10 words), or null if generation fails.
+   */
+  generateTitle = async (userMessage: string, assistantContent: string): Promise<string | null> => {
+    const prompt = this.buildPrompt(userMessage, assistantContent);
+
+    try {
+      const title = await this.callCli(prompt);
+      if (!title) return null;
+
+      const cleaned = this.cleanTitle(title);
+      if (!cleaned) return null;
+
+      this.log('TITLE_GEN', `Generated title: "${cleaned}"`);
+      return cleaned;
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : 'Unknown error';
+      this.log('TITLE_GEN', `Title generation failed: ${msg}`);
+      return null;
+    }
+  };
+
+  /**
+   * Build the prompt for title generation.
+   */
+  private buildPrompt = (userMessage: string, assistantContent: string): string => {
+    // Extract text from assistant content blocks
+    let assistantText = '';
+    try {
+      const blocks = JSON.parse(assistantContent) as Array<Record<string, unknown>>;
+      assistantText = blocks
+        .filter(b => b.type === 'text' && typeof b.text === 'string')
+        .map(b => b.text as string)
+        .join(' ');
+    } catch {
+      assistantText = '';
+    }
+
+    // Truncate to keep the prompt small
+    const maxLen = 500;
+    const truncUser = userMessage.length > maxLen ? userMessage.slice(0, maxLen) + '...' : userMessage;
+    const truncAssistant = assistantText.length > maxLen ? assistantText.slice(0, maxLen) + '...' : assistantText;
+
+    return [
+      'Generate a short title (3-10 words) for this chat conversation.',
+      'The title should summarize the main topic or intent.',
+      'Reply with ONLY the title text, no quotes, no punctuation at the end, no explanation.',
+      '',
+      `User: ${truncUser}`,
+      '',
+      truncAssistant ? `Assistant: ${truncAssistant}` : '',
+    ].filter(Boolean).join('\n');
+  };
+
+  /**
+   * Call Claude CLI in one-shot mode with claude-haiku-4-5.
+   */
+  private callCli = (prompt: string): Promise<string | null> => {
+    return new Promise((resolve) => {
+      const args = [
+        '-p', prompt,
+        '--model', 'claude-haiku-4-5',
+        '--output-format', 'text',
+        '--max-turns', '1',
+        '--dangerously-skip-permissions',
+      ];
+
+      const child = spawn('claude', args, {
+        stdio: ['ignore', 'pipe', 'pipe'],
+        env: { ...process.env },
+        timeout: 15000,
+      });
+
+      let stdout = '';
+      let stderr = '';
+
+      child.stdout.on('data', (data: Buffer) => {
+        stdout += data.toString();
+      });
+
+      child.stderr.on('data', (data: Buffer) => {
+        stderr += data.toString();
+      });
+
+      child.on('close', (code) => {
+        if (code === 0 && stdout.trim()) {
+          resolve(stdout.trim());
+        } else {
+          if (stderr) {
+            this.log('TITLE_GEN', `CLI stderr: ${stderr.trim()}`);
+          }
+          resolve(null);
+        }
+      });
+
+      child.on('error', (err) => {
+        this.log('TITLE_GEN', `CLI spawn error: ${err.message}`);
+        resolve(null);
+      });
+    });
+  };
+
+  /**
+   * Clean and validate the generated title.
+   */
+  private cleanTitle = (raw: string): string | null => {
+    // Remove quotes, trailing punctuation
+    let title = raw
+      .replace(/^["']+|["']+$/g, '')
+      .replace(/[.!?]+$/, '')
+      .trim();
+
+    // Validate word count (3-10 words)
+    const words = title.split(/\s+/).filter(Boolean);
+    if (words.length < 2 || words.length > 15) {
+      // Be lenient but reject obviously bad titles
+      if (words.length === 0) return null;
+      // Truncate to 10 words if too long
+      if (words.length > 10) {
+        title = words.slice(0, 10).join(' ');
+      }
+    }
+
+    return title || null;
+  };
+}

package/templates/assistkick-product-system/packages/backend/src/services/tts_service.ts

@@ -111,8 +111,8 @@ export class TtsService {
               reject(new Error(parsed.error));
               return;
             }
-          } catch {
-            // Not JSON, use the error message
+          } catch (parseErr: any) {
+            this.log('TTS', `Failed to parse error output as JSON: ${parseErr.message}`);
           }
           reject(new Error(`TTS process failed: ${error.message}`));
           return;
@@ -125,7 +125,8 @@ export class TtsService {
             return;
           }
           resolve(parsed as TtsResult);
-        } catch {
+        } catch (parseErr: any) {
+          this.log('TTS', `Failed to parse TTS output: ${parseErr.message}`);
           reject(new Error(`Failed to parse TTS output: ${stdout}`));
         }
       });

package/templates/assistkick-product-system/packages/backend/src/services/video_render_service.ts

@@ -101,7 +101,7 @@ export class VideoRenderService {
 
     // Start rendering asynchronously — don't await
     this.executeRender(id, request).catch((err) => {
-      this.log('RENDER', `Render ${id} async error: ${err.message}`);
+      this.log('RENDER', `Render ${id} async error:`, err.stack || err.message);
     });
 
     return this.getStatus(id) as Promise<RenderStatus>;
@@ -166,7 +166,7 @@ export class VideoRenderService {
         unlinkSync(row.filePath);
         this.log('RENDER', `Deleted file for render ${renderId}: ${row.filePath}`);
       } catch (err: any) {
-        this.log('RENDER', `Failed to delete file for render ${renderId}: ${err.message}`);
+        this.log('RENDER', `Failed to delete file for render ${renderId}:`, err.stack || err.message);
       }
     }
 
@@ -244,7 +244,7 @@ export class VideoRenderService {
 
       this.log('RENDER', `Render ${renderId} complete: ${outputPath} (${stat.size} bytes)`);
     } catch (err: any) {
-      this.log('RENDER', `Render ${renderId} failed: ${err.message}`);
+      this.log('RENDER', `Render ${renderId} failed:`, err.stack || err.message);
 
       await db.update(videoRenders)
         .set({

package/templates/assistkick-product-system/packages/frontend/package.json

@@ -21,9 +21,13 @@
     "d3": "^7.9.0",
     "lucide-react": "^0.577.0",
     "marked": "^15.0.0",
+    "mermaid": "^11.13.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-markdown": "^10.1.0",
     "react-router-dom": "^7.6.0",
+    "react-syntax-highlighter": "^16.1.1",
+    "remark-gfm": "^4.0.1",
     "remotion": "^4.0.434",
     "zustand": "^5.0.11"
   },
@@ -32,6 +36,7 @@
     "@types/d3": "^7.4.3",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^4.5.2",
     "tailwindcss": "^4.2.1",
     "typescript": "^5.9.3",

package/templates/assistkick-product-system/packages/frontend/src/App.tsx

@@ -17,6 +17,7 @@ import { AgentsRoute } from './routes/AgentsRoute';
 import { WorkflowsRoute } from './routes/WorkflowsRoute';
 import { FilesRoute } from './routes/FilesRoute';
 import { VideographyRoute } from './routes/VideographyRoute';
+import { ChatRoute } from './routes/ChatRoute';
 
 export function App() {
   return (
@@ -34,6 +35,7 @@ export function App() {
           <Route path="/coherence" element={<CoherenceRoute />} />
           <Route path="/users" element={<UsersRoute />} />
           <Route path="/terminal" element={<TerminalRoute />} />
+          <Route path="/chat" element={<ChatRoute />} />
           <Route path="/agents" element={<AgentsRoute />} />
           <Route path="/workflows" element={<WorkflowsRoute />} />
           <Route path="/files" element={<FilesRoute />} />