diff --git a/packages/cli/assets/insight/build.mjs b/packages/cli/assets/insight/build.mjs
new file mode 100644
index 000000000..11de26102
--- /dev/null
+++ b/packages/cli/assets/insight/build.mjs
@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable no-undef */
+import { writeFile, readFile } from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+import { build } from 'vite';
+
+const assetsDir = dirname(fileURLToPath(import.meta.url));
+const distDir = join(assetsDir, 'dist');
+
+const templateModulePath = join(
+  assetsDir,
+  '..',
+  '..',
+  'src',
+  'services',
+  'insight',
+  'templates',
+  'insightTemplate.ts',
+);
+
+console.log('Building insight assets with Vite...');
+await build();
+
+console.log('Reading generated files...');
+let jsContent = '';
+let cssContent = '';
+
+try {
+  jsContent = await readFile(join(distDir, 'main.js'), 'utf-8');
+} catch (e) {
+  console.error('Failed to read main.js from dist');
+  throw e;
+}
+
+try {
+  // Try style.css first (standard Vite lib mode output)
+  cssContent = await readFile(join(distDir, 'style.css'), 'utf-8');
+} catch (e) {
+  try {
+    // Try main.css (if configured via assetFileNames)
+    cssContent = await readFile(join(distDir, 'main.css'), 'utf-8');
+  } catch (e2) {
+    console.warn(
+      'No CSS file found in dist (style.css or main.css). Using empty string.',
+    );
+  }
+}
+
+const templateModule = `/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * This file is code-generated; do not edit manually.
+ */
+
+export const INSIGHT_JS = ${JSON.stringify(jsContent.trim())};
+export const INSIGHT_CSS = ${JSON.stringify(cssContent.trim())};
+`;
+
+await writeFile(templateModulePath, templateModule);
+console.log(`Successfully generated ${templateModulePath}`);
diff --git a/packages/cli/assets/insight/package.json b/packages/cli/assets/insight/package.json
new file mode 100644
index 000000000..53103e99b
--- /dev/null
+++ b/packages/cli/assets/insight/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "@qwen-code/cli-insight",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "node build.mjs"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "autoprefixer": "^10.4.24",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
+    "vite": "^5.0.0"
+  }
+}
diff --git a/packages/cli/assets/insight/postcss.config.js b/packages/cli/assets/insight/postcss.config.js
new file mode 100644
index 000000000..51a6e4e62
--- /dev/null
+++ b/packages/cli/assets/insight/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+};
diff --git a/packages/cli/src/services/insight/templates/scripts/components/App.js b/packages/cli/assets/insight/src/App.tsx
similarity index 76%
rename from packages/cli/src/services/insight/templates/scripts/components/App.js
rename to packages/cli/assets/insight/src/App.tsx
index 2960c270b..47c00725c 100644
--- a/packages/cli/src/services/insight/templates/scripts/components/App.js
+++ b/packages/cli/assets/insight/src/App.tsx
@@ -1,9 +1,24 @@
-/* eslint-disable react/jsx-no-undef */
-/* eslint-disable react/prop-types */
-/* eslint-disable no-undef */
+import { useState } from 'react';
+import ReactDOM from 'react-dom/client';
+import { Header, StatsRow } from './Header';
+import {
+  AtAGlance,
+  NavToc,
+  ProjectAreas,
+  InteractionStyle,
+  ImpressiveWorkflows,
+  FrictionPoints,
+  Improvements,
+  FutureOpportunities,
+  MemorableMoment,
+} from './Qualitative';
+import './styles.css';
+import { InsightData } from './types';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 
 // Main App Component
-function InsightApp({ data }) {
+function InsightApp({ data }: { data: InsightData }) {
   if (!data) {
     return (
       <div className="text-center text-slate-600">
@@ -17,9 +32,10 @@ function InsightApp({ data }) {
   let dateRangeStr = '';
   if (heatmapKeys.length > 0) {
     const dates = heatmapKeys.map((d) => new Date(d));
-    const minDate = new Date(Math.min(...dates));
-    const maxDate = new Date(Math.max(...dates));
-    const formatDate = (d) => d.toISOString().split('T')[0];
+    const timestamps = dates.map((d) => d.getTime());
+    const minDate = new Date(Math.min(...timestamps));
+    const maxDate = new Date(Math.max(...timestamps));
+    const formatDate = (d: Date) => d.toISOString().split('T')[0];
     dateRangeStr = `${formatDate(minDate)} to ${formatDate(maxDate)}`;
   }
 
@@ -56,8 +72,8 @@ function InsightApp({ data }) {
         <>
           <ImpressiveWorkflows
             qualitative={data.qualitative}
-            primarySuccess={data.primarySuccess}
-            outcomes={data.outcomes}
+            primarySuccess={data.primarySuccess!}
+            outcomes={data.outcomes!}
           />
           <FrictionPoints
             qualitative={data.qualitative}
@@ -90,7 +106,7 @@ function ExportButton() {
     setIsExporting(true);
 
     try {
-      const canvas = await html2canvas(container, {
+      const canvas = await window.html2canvas(container, {
         scale: 2,
         useCORS: true,
         logging: false,
@@ -127,13 +143,13 @@ function ExportButton() {
 
 // App Initialization - Mount React app when DOM is ready
 const container = document.getElementById('react-root');
-if (container && window.INSIGHT_DATA && window.ReactDOM) {
+if (container && window.INSIGHT_DATA && ReactDOM) {
   const root = ReactDOM.createRoot(container);
-  root.render(React.createElement(InsightApp, { data: window.INSIGHT_DATA }));
+  root.render(<InsightApp data={window.INSIGHT_DATA} />);
 } else {
   console.error('Failed to mount React app:', {
     container: !!container,
     data: !!window.INSIGHT_DATA,
-    ReactDOM: !!window.ReactDOM,
+    ReactDOM: !!ReactDOM,
   });
 }
diff --git a/packages/cli/src/services/insight/templates/scripts/components/Charts.js b/packages/cli/assets/insight/src/Charts.tsx
similarity index 88%
rename from packages/cli/src/services/insight/templates/scripts/components/Charts.js
rename to packages/cli/assets/insight/src/Charts.tsx
index 836e072b8..51cfd66af 100644
--- a/packages/cli/src/services/insight/templates/scripts/components/Charts.js
+++ b/packages/cli/assets/insight/src/Charts.tsx
@@ -1,13 +1,16 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable react/prop-types */
-/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { InsightData } from './types';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React, { useRef, useEffect } from 'react';
+const Chart = (window as any).Chart;
 
 // -----------------------------------------------------------------------------
 // Existing Components
 // -----------------------------------------------------------------------------
 
 // Dashboard Cards Component
-function DashboardCards({ insights }) {
+export function DashboardCards({ insights }: { insights: InsightData }) {
   const cardClass = 'glass-card p-6';
   const sectionTitleClass =
     'text-lg font-semibold tracking-tight text-slate-900';
@@ -38,7 +41,17 @@ function DashboardCards({ insights }) {
 }
 
 // Streak Card Component
-function StreakCard({ currentStreak, longestStreak, cardClass, captionClass }) {
+export function StreakCard({
+  currentStreak,
+  longestStreak,
+  cardClass,
+  captionClass,
+}: {
+  currentStreak: number;
+  longestStreak: number;
+  cardClass: string;
+  captionClass: string;
+}) {
   return (
     <div className={`${cardClass} h-full`}>
       <div className="flex items-start justify-between">
@@ -60,9 +73,17 @@ function StreakCard({ currentStreak, longestStreak, cardClass, captionClass }) {
 }
 
 // Active Hours Chart Component
-function ActiveHoursChart({ activeHours, cardClass, sectionTitleClass }) {
-  const chartRef = useRef(null);
-  const chartInstance = useRef(null);
+export function ActiveHoursChart({
+  activeHours,
+  cardClass,
+  sectionTitleClass,
+}: {
+  activeHours: Record<number, number>;
+  cardClass: string;
+  sectionTitleClass: string;
+}) {
+  const chartRef = useRef<HTMLCanvasElement | null>(null);
+  const chartInstance = useRef<any>(null);
 
   useEffect(() => {
     if (chartInstance.current) {
@@ -138,6 +159,12 @@ function WorkSessionCard({
   latestActiveTime,
   cardClass,
   sectionTitleClass,
+}: {
+  longestWorkDuration: number;
+  longestWorkDate: string | null;
+  latestActiveTime: string | null;
+  cardClass: string;
+  sectionTitleClass: string;
 }) {
   return (
     <div className={`${cardClass} h-full space-y-3`}>
@@ -173,7 +200,11 @@ function WorkSessionCard({
 }
 
 // Heatmap Section Component
-function HeatmapSection({ heatmap }) {
+export function HeatmapSection({
+  heatmap,
+}: {
+  heatmap: Record<string, number>;
+}) {
   const cardClass = 'glass-card p-6';
   const sectionTitleClass =
     'text-lg font-semibold tracking-tight text-slate-900';
@@ -194,7 +225,11 @@ function HeatmapSection({ heatmap }) {
 }
 
 // Activity Heatmap Component
-function ActivityHeatmap({ heatmapData }) {
+function ActivityHeatmap({
+  heatmapData,
+}: {
+  heatmapData: Record<string, number>;
+}) {
   const width = 1000;
   const height = 150;
   const cellSize = 14;
@@ -215,7 +250,7 @@ function ActivityHeatmap({ heatmapData }) {
   const colorLevels = [0, 2, 4, 10, 20];
   const colors = ['#e2e8f0', '#a5d8ff', '#74c0fc', '#339af0', '#1c7ed6'];
 
-  function getColor(value) {
+  function getColor(value: number) {
     if (value === 0) return colors[0];
     for (let i = colorLevels.length - 1; i >= 1; i--) {
       if (value >= colorLevels[i]) return colors[i];
diff --git a/packages/cli/src/services/insight/templates/scripts/components/utils.js b/packages/cli/assets/insight/src/Components.tsx
similarity index 72%
rename from packages/cli/src/services/insight/templates/scripts/components/utils.js
rename to packages/cli/assets/insight/src/Components.tsx
index 75d371a4b..e64df68fa 100644
--- a/packages/cli/src/services/insight/templates/scripts/components/utils.js
+++ b/packages/cli/assets/insight/src/Components.tsx
@@ -1,11 +1,9 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable react/prop-types */
-/* eslint-disable no-undef */
-
-const { useState, useRef, useEffect } = React;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
+import { useState } from 'react';
 
 // Simple Markdown Parser Component
-function MarkdownText({ children }) {
+export function MarkdownText({ children }: { children: string }) {
   if (!children || typeof children !== 'string') return children;
 
   // Split by bold markers (**text**)
@@ -23,7 +21,13 @@ function MarkdownText({ children }) {
   );
 }
 
-function CopyButton({ text, label = 'Copy' }) {
+export function CopyButton({
+  text,
+  label = 'Copy',
+}: {
+  text: string;
+  label?: string;
+}) {
   const [copied, setCopied] = useState(false);
 
   const handleCopy = () => {
diff --git a/packages/cli/src/services/insight/templates/scripts/components/Header.js b/packages/cli/assets/insight/src/Header.tsx
similarity index 77%
rename from packages/cli/src/services/insight/templates/scripts/components/Header.js
rename to packages/cli/assets/insight/src/Header.tsx
index 4f4fb1816..300b720c4 100644
--- a/packages/cli/src/services/insight/templates/scripts/components/Header.js
+++ b/packages/cli/assets/insight/src/Header.tsx
@@ -1,8 +1,15 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable react/prop-types */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
+import { InsightData } from './types';
 
 // Header Component
-function Header({ data, dateRangeStr }) {
+export function Header({
+  data,
+  dateRangeStr,
+}: {
+  data: InsightData;
+  dateRangeStr: string;
+}) {
   const { totalMessages, totalSessions } = data;
 
   return (
@@ -20,7 +27,7 @@ function Header({ data, dateRangeStr }) {
   );
 }
 
-function StatsRow({ data }) {
+export function StatsRow({ data }: { data: InsightData }) {
   const {
     totalMessages = 0,
     totalLinesAdded = 0,
@@ -34,9 +41,10 @@ function StatsRow({ data }) {
   let daysSpan = 0;
   if (heatmapKeys.length > 0) {
     const dates = heatmapKeys.map((d) => new Date(d));
-    const minDate = new Date(Math.min(...dates));
-    const maxDate = new Date(Math.max(...dates));
-    const diffTime = Math.abs(maxDate - minDate);
+    const timestamps = dates.map((d) => d.getTime());
+    const minDate = new Date(Math.min(...timestamps));
+    const maxDate = new Date(Math.max(...timestamps));
+    const diffTime = Math.abs(maxDate.getTime() - minDate.getTime());
     daysSpan = Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1;
   }
 
diff --git a/packages/cli/src/services/insight/templates/scripts/components/Qualitative.js b/packages/cli/assets/insight/src/Qualitative.tsx
similarity index 91%
rename from packages/cli/src/services/insight/templates/scripts/components/Qualitative.js
rename to packages/cli/assets/insight/src/Qualitative.tsx
index de2a44b2a..f9b3500e0 100644
--- a/packages/cli/src/services/insight/templates/scripts/components/Qualitative.js
+++ b/packages/cli/assets/insight/src/Qualitative.tsx
@@ -1,13 +1,16 @@
-/* eslint-disable react/jsx-no-undef */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable react/prop-types */
-/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState } from 'react';
+import { DashboardCards, HeatmapSection } from './Charts';
+import { InsightData, QualitativeData } from './types';
+import { CopyButton, MarkdownText } from './Components';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
 
 // -----------------------------------------------------------------------------
 // Qualitative Insight Components
 // -----------------------------------------------------------------------------
 
-function AtAGlance({ qualitative }) {
+export function AtAGlance({ qualitative }: { qualitative: QualitativeData }) {
   const { atAGlance } = qualitative;
   if (!atAGlance) return null;
 
@@ -48,7 +51,7 @@ function AtAGlance({ qualitative }) {
   );
 }
 
-function NavToc() {
+export function NavToc() {
   return (
     <nav className="nav-toc">
       <a href="#section-work">What You Work On</a>
@@ -62,7 +65,15 @@ function NavToc() {
   );
 }
 
-function ProjectAreas({ qualitative, topGoals, topTools }) {
+export function ProjectAreas({
+  qualitative,
+  topGoals,
+  topTools,
+}: {
+  qualitative: QualitativeData;
+  topGoals?: Record<string, number>;
+  topTools?: Record<string, number> | [string, number][];
+}) {
   const { projectAreas } = qualitative;
 
   // Convert topTools (array of tuples) to object for chart if needed
@@ -124,7 +135,13 @@ function ProjectAreas({ qualitative, topGoals, topTools }) {
   );
 }
 
-function InteractionStyle({ qualitative, insights }) {
+export function InteractionStyle({
+  qualitative,
+  insights,
+}: {
+  qualitative: QualitativeData;
+  insights: InsightData;
+}) {
   const { interactionStyle } = qualitative;
   if (!interactionStyle) return null;
 
@@ -154,7 +171,15 @@ function InteractionStyle({ qualitative, insights }) {
   );
 }
 
-function ImpressiveWorkflows({ qualitative, primarySuccess, outcomes }) {
+export function ImpressiveWorkflows({
+  qualitative,
+  primarySuccess,
+  outcomes,
+}: {
+  qualitative: QualitativeData;
+  primarySuccess: Record<string, number>;
+  outcomes: Record<string, number>;
+}) {
   const { impressiveWorkflows } = qualitative;
   if (!impressiveWorkflows) return null;
 
@@ -227,7 +252,7 @@ function ImpressiveWorkflows({ qualitative, primarySuccess, outcomes }) {
 }
 
 // Format label for display (capitalize and replace underscores with spaces)
-function formatLabel(label) {
+function formatLabel(label: string) {
   if (label === 'unclear_from_transcript') {
     return 'Unclear';
   }
@@ -243,6 +268,11 @@ function HorizontalBarChart({
   title,
   color = '#3b82f6',
   allowedKeys = null,
+}: {
+  data: Record<string, number>;
+  title: string;
+  color?: string;
+  allowedKeys?: string[] | null;
 }) {
   if (!data || Object.keys(data).length === 0) return null;
 
@@ -362,7 +392,15 @@ function HorizontalBarChart({
   );
 }
 
-function FrictionPoints({ qualitative, satisfaction, friction }) {
+export function FrictionPoints({
+  qualitative,
+  satisfaction,
+  friction,
+}: {
+  qualitative: QualitativeData;
+  satisfaction?: Record<string, number>;
+  friction?: Record<string, number>;
+}) {
   const { frictionPoints } = qualitative;
   if (!frictionPoints) return null;
 
@@ -444,13 +482,19 @@ function FrictionPoints({ qualitative, satisfaction, friction }) {
 }
 
 // Qwen.md Additions Section Component
-function QwenMdAdditionsSection({ additions }) {
+function QwenMdAdditionsSection({
+  additions,
+}: {
+  additions: NonNullable<
+    NonNullable<QualitativeData['improvements']>['Qwen_md_additions']
+  >;
+}) {
   const [checkedState, setCheckedState] = useState(
     new Array(additions.length).fill(true),
   );
   const [copiedAll, setCopiedAll] = useState(false);
 
-  const handleCheckboxChange = (position) => {
+  const handleCheckboxChange = (position: number) => {
     const updatedCheckedState = checkedState.map((item, index) =>
       index === position ? !item : item,
     );
@@ -460,7 +504,7 @@ function QwenMdAdditionsSection({ additions }) {
   const handleCopyAll = () => {
     const textToCopy = additions
       .filter((_, index) => checkedState[index])
-      .map((item) => item.addition)
+      .map((item: { addition: any }) => item.addition)
       .join('\n\n');
 
     if (!textToCopy) return;
@@ -511,7 +555,11 @@ function QwenMdAdditionsSection({ additions }) {
   );
 }
 
-function Improvements({ qualitative }) {
+export function Improvements({
+  qualitative,
+}: {
+  qualitative: QualitativeData;
+}) {
   const { improvements } = qualitative;
   if (!improvements) return null;
 
@@ -594,7 +642,11 @@ function Improvements({ qualitative }) {
   );
 }
 
-function FutureOpportunities({ qualitative }) {
+export function FutureOpportunities({
+  qualitative,
+}: {
+  qualitative: QualitativeData;
+}) {
   const { futureOpportunities } = qualitative;
   if (!futureOpportunities) return null;
 
@@ -644,7 +696,11 @@ function FutureOpportunities({ qualitative }) {
   );
 }
 
-function MemorableMoment({ qualitative }) {
+export function MemorableMoment({
+  qualitative,
+}: {
+  qualitative: QualitativeData;
+}) {
   const { memorableMoment } = qualitative;
   if (!memorableMoment) return null;
 
diff --git a/packages/cli/src/services/insight/templates/styles/base.css b/packages/cli/assets/insight/src/styles.css
similarity index 100%
rename from packages/cli/src/services/insight/templates/styles/base.css
rename to packages/cli/assets/insight/src/styles.css
diff --git a/packages/cli/assets/insight/src/types.ts b/packages/cli/assets/insight/src/types.ts
new file mode 100644
index 000000000..27873c6b7
--- /dev/null
+++ b/packages/cli/assets/insight/src/types.ts
@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { InsightData } from '../../../src/services/insight/types/StaticInsightTypes';
+import { QualitativeInsights as QualitativeData } from '../../../src/services/insight/types/QualitativeInsightTypes';
+
+declare global {
+  interface Window {
+    React: typeof import('react');
+    ReactDOM: typeof import('react-dom/client');
+    Chart: any;
+    html2canvas: any;
+    INSIGHT_DATA: InsightData;
+  }
+}
+
+export type { InsightData, QualitativeData };
diff --git a/packages/cli/assets/insight/tailwind.config.js b/packages/cli/assets/insight/tailwind.config.js
new file mode 100644
index 000000000..2ce8b4a76
--- /dev/null
+++ b/packages/cli/assets/insight/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/packages/cli/assets/insight/tsconfig.json b/packages/cli/assets/insight/tsconfig.json
new file mode 100644
index 000000000..1c3c5fd43
--- /dev/null
+++ b/packages/cli/assets/insight/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "jsx": "react",
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2021", "DOM", "DOM.Iterable"],
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src"]
+}
diff --git a/packages/cli/assets/insight/vite.config.mjs b/packages/cli/assets/insight/vite.config.mjs
new file mode 100644
index 000000000..1ea2b7213
--- /dev/null
+++ b/packages/cli/assets/insight/vite.config.mjs
@@ -0,0 +1,39 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  plugins: [react({ jsxRuntime: 'classic' })],
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+    minify: true,
+    target: 'es2018',
+    lib: {
+      entry: join(__dirname, 'src/App.tsx'),
+      name: 'InsightApp',
+      fileName: () => 'main.js',
+      formats: ['iife'],
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'react-dom/client'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          'react-dom/client': 'ReactDOM',
+        },
+        assetFileNames: (assetInfo) => {
+          if (assetInfo.name === 'style.css') return 'main.css';
+          return assetInfo.name;
+        },
+      },
+    },
+  },
+  define: {
+    'process.env.NODE_ENV': '"production"',
+  },
+});
diff --git a/packages/cli/src/services/insight/generators/DataProcessor.ts b/packages/cli/src/services/insight/generators/DataProcessor.ts
index 481f79b39..10c212172 100644
--- a/packages/cli/src/services/insight/generators/DataProcessor.ts
+++ b/packages/cli/src/services/insight/generators/DataProcessor.ts
@@ -6,7 +6,10 @@
 
 import fs from 'fs/promises';
 import path from 'path';
-import { read as readJsonlFile } from '@qwen-code/qwen-code-core';
+import {
+  read as readJsonlFile,
+  createDebugLogger,
+} from '@qwen-code/qwen-code-core';
 import pLimit from 'p-limit';
 import type { Config, ChatRecord } from '@qwen-code/qwen-code-core';
 import type {
@@ -40,6 +43,8 @@ import {
   ANALYSIS_PROMPT,
 } from '../prompts/InsightPrompts.js';
 
+const logger = createDebugLogger('DataProcessor');
+
 export class DataProcessor {
   constructor(private config: Config) {}
 
@@ -194,7 +199,7 @@ export class DataProcessor {
         session_id: records[0].sessionId,
       };
     } catch (error) {
-      console.error(
+      logger.error(
         `Failed to analyze session ${records[0]?.sessionId}:`,
         error,
       );
@@ -362,7 +367,7 @@ export class DataProcessor {
       return undefined;
     }
 
-    console.log('Generating qualitative insights...');
+    logger.info('Generating qualitative insights...');
 
     const commonData = this.prepareCommonPromptData(metrics, facets);
 
@@ -380,7 +385,7 @@ export class DataProcessor {
         });
         return result as T;
       } catch (error) {
-        console.error('Failed to generate insight:', error);
+        logger.error('Failed to generate insight:', error);
         throw error;
       }
     };
@@ -620,39 +625,6 @@ export class DataProcessor {
         ),
       ]);
 
-      console.log(
-        '🚀 ~ DataProcessor ~ generateQualitativeInsights ~ impressiveWorkflows:',
-        impressiveWorkflows,
-      );
-      console.log(
-        '🚀 ~ DataProcessor ~ generateQualitativeInsights ~ atAGlance:',
-        atAGlance,
-      );
-      console.log(
-        '🚀 ~ DataProcessor ~ generateQualitativeInsights ~ interactionStyle:',
-        interactionStyle,
-      );
-      console.log(
-        '🚀 ~ DataProcessor ~ generateQualitativeInsights ~ improvements:',
-        improvements,
-      );
-      console.log(
-        '🚀 ~ DataProcessor ~ generateQualitativeInsights ~ memorableMoment:',
-        memorableMoment,
-      );
-      console.log(
-        '🚀 ~ DataProcessor ~ generateQualitativeInsights ~ frictionPoints:',
-        frictionPoints,
-      );
-      console.log(
-        '🚀 ~ DataProcessor ~ generateQualitativeInsights ~ futureOpportunities:',
-        futureOpportunities,
-      );
-      console.log(
-        '🚀 ~ DataProcessor ~ generateQualitativeInsights ~ projectAreas:',
-        projectAreas,
-      );
-
       return {
         impressiveWorkflows,
         projectAreas,
@@ -664,7 +636,7 @@ export class DataProcessor {
         atAGlance,
       };
     } catch (e) {
-      console.error('Error generating qualitative insights:', e);
+      logger.error('Error generating qualitative insights:', e);
       return undefined;
     }
   }
@@ -783,12 +755,12 @@ None captured`;
                 const fileStats = await fs.stat(filePath);
                 allChatFiles.push({ path: filePath, mtime: fileStats.mtimeMs });
               } catch (e) {
-                console.error(`Failed to stat file ${filePath}:`, e);
+                logger.error(`Failed to stat file ${filePath}:`, e);
               }
             }
           } catch (error) {
             if ((error as NodeJS.ErrnoException).code !== 'ENOENT') {
-              console.log(
+              logger.error(
                 `Error reading chats directory for project ${projectDir}: ${error}`,
               );
             }
@@ -800,9 +772,9 @@ None captured`;
     } catch (error) {
       if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
         // Base directory doesn't exist, return empty
-        console.log(`Base directory does not exist: ${baseDir}`);
+        logger.info(`Base directory does not exist: ${baseDir}`);
       } else {
-        console.log(`Error reading base directory: ${error}`);
+        logger.error(`Error reading base directory: ${error}`);
       }
     }
 
@@ -898,7 +870,7 @@ None captured`;
             }
           }
         } catch (error) {
-          console.error(
+          logger.error(
             `Failed to process metrics for file ${fileInfo.path}:`,
             error,
           );
@@ -994,10 +966,10 @@ None captured`;
       .sort((a, b) => b.mtime - a.mtime)
       .slice(0, 50);
 
-    console.log(`Analyzing ${recentFiles.length} recent sessions with LLM...`);
+    logger.info(`Analyzing ${recentFiles.length} recent sessions with LLM...`);
 
     // Create a limit function with concurrency of 4 to avoid 429 errors
-    const limit = pLimit(4);
+    const limit = pLimit(2);
 
     let completed = 0;
     const total = recentFiles.length;
@@ -1036,7 +1008,7 @@ None captured`;
               } catch (readError) {
                 // File doesn't exist or is invalid, proceed to analyze
                 if ((readError as NodeJS.ErrnoException).code !== 'ENOENT') {
-                  console.warn(
+                  logger.warn(
                     `Failed to read existing facet for ${sessionId}, regenerating:`,
                     readError,
                   );
@@ -1059,7 +1031,7 @@ None captured`;
                 'utf-8',
               );
             } catch (writeError) {
-              console.error(
+              logger.error(
                 `Failed to write facet file for session ${facet.session_id}:`,
                 writeError,
               );
@@ -1074,7 +1046,7 @@ None captured`;
 
           return facet;
         } catch (e) {
-          console.error(`Error analyzing session file ${fileInfo.path}:`, e);
+          logger.error(`Error analyzing session file ${fileInfo.path}:`, e);
           completed++;
           if (onProgress) {
             const percent = 20 + Math.round((completed / total) * 60);
diff --git a/packages/cli/src/services/insight/generators/StaticInsightGenerator.ts b/packages/cli/src/services/insight/generators/StaticInsightGenerator.ts
index bd98331e4..9f59e499f 100644
--- a/packages/cli/src/services/insight/generators/StaticInsightGenerator.ts
+++ b/packages/cli/src/services/insight/generators/StaticInsightGenerator.ts
@@ -37,33 +37,25 @@ export class StaticInsightGenerator {
     baseDir: string,
     onProgress?: InsightProgressCallback,
   ): Promise<string> {
-    try {
-      // Ensure output directory exists
-      const outputDir = await this.ensureOutputDirectory();
-      const facetsDir = path.join(outputDir, 'facets');
-      await fs.mkdir(facetsDir, { recursive: true });
+    // Ensure output directory exists
+    const outputDir = await this.ensureOutputDirectory();
+    const facetsDir = path.join(outputDir, 'facets');
+    await fs.mkdir(facetsDir, { recursive: true });
 
-      // Process data
-      console.log('Processing insight data...');
-      const insights: InsightData = await this.dataProcessor.generateInsights(
-        baseDir,
-        facetsDir,
-        onProgress,
-      );
+    // Process data
+    const insights: InsightData = await this.dataProcessor.generateInsights(
+      baseDir,
+      facetsDir,
+      onProgress,
+    );
 
-      // Render HTML
-      console.log('Rendering HTML template...');
-      const html = await this.templateRenderer.renderInsightHTML(insights);
+    // Render HTML
+    const html = await this.templateRenderer.renderInsightHTML(insights);
 
-      const outputPath = path.join(outputDir, 'insight.html');
+    const outputPath = path.join(outputDir, 'insight.html');
 
-      // Write the HTML file
-      console.log(`Writing HTML file to: ${outputPath}`);
-      await fs.writeFile(outputPath, html, 'utf-8');
-      return outputPath;
-    } catch (error) {
-      console.log(`Error generating static insight: ${error}`);
-      throw error;
-    }
+    // Write the HTML file
+    await fs.writeFile(outputPath, html, 'utf-8');
+    return outputPath;
   }
 }
diff --git a/packages/cli/src/services/insight/generators/TemplateRenderer.ts b/packages/cli/src/services/insight/generators/TemplateRenderer.ts
index ca7509433..0ae36cb7f 100644
--- a/packages/cli/src/services/insight/generators/TemplateRenderer.ts
+++ b/packages/cli/src/services/insight/generators/TemplateRenderer.ts
@@ -4,80 +4,48 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import fs from 'fs/promises';
-import { existsSync } from 'fs';
-import path, { dirname } from 'path';
-import { fileURLToPath } from 'url';
+import { INSIGHT_JS, INSIGHT_CSS } from '../templates/insightTemplate.js';
 import type { InsightData } from '../types/StaticInsightTypes.js';
 
 export class TemplateRenderer {
-  private templateDir: string;
-
-  constructor() {
-    const __filename = fileURLToPath(import.meta.url);
-    const __dirname = dirname(__filename);
-
-    // In bundled version (dist/cli.js), __dirname is dist/, templates at dist/templates/
-    // In development (dist/src/services/insight/generators/), templates at dist/src/services/insight/templates/
-    const bundledTemplatePath = path.join(__dirname, 'templates');
-    const devTemplatePath = path.join(__dirname, '..', 'templates');
-
-    // Try bundled path first (for production), fall back to dev path
-    try {
-      // Check if bundled templates exist
-      if (existsSync(bundledTemplatePath)) {
-        this.templateDir = bundledTemplatePath;
-      } else {
-        this.templateDir = devTemplatePath;
-      }
-    } catch {
-      // If check fails, use dev path as fallback
-      this.templateDir = devTemplatePath;
-    }
-  }
-
-  // Load template files
-  private async loadTemplate(): Promise<string> {
-    const templatePath = path.join(this.templateDir, 'insight-template.html');
-    return await fs.readFile(templatePath, 'utf-8');
-  }
-
-  private async loadStyles(): Promise<string> {
-    const stylesPath = path.join(this.templateDir, 'styles', 'base.css');
-    return await fs.readFile(stylesPath, 'utf-8');
-  }
-
-  private async loadScripts(): Promise<string> {
-    const componentsDir = path.join(this.templateDir, 'scripts', 'components');
-
-    const componentFiles = [
-      'utils.js',
-      'Header.js',
-      'Qualitative.js',
-      'Charts.js',
-      'App.js',
-    ];
-
-    const scripts = await Promise.all(
-      componentFiles.map((file) =>
-        fs.readFile(path.join(componentsDir, file), 'utf-8'),
-      ),
-    );
-
-    return scripts.join('\n\n');
-  }
-
   // Render the complete HTML file
   async renderInsightHTML(insights: InsightData): Promise<string> {
-    const template = await this.loadTemplate();
-    const styles = await this.loadStyles();
-    const scripts = await this.loadScripts();
+    const html = `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Qwen Code Insights</title>
+    <style>
+      ${INSIGHT_CSS}
+    </style>
+  </head>
+  <body>
+    <div class="min-h-screen" id="container">
+      <div class="mx-auto max-w-6xl px-6 py-10 md:py-12">
+        <div id="react-root"></div>
+      </div>
+    </div>
 
-    // Replace all placeholders
-    let html = template;
-    html = html.replace('{{STYLES_PLACEHOLDER}}', styles);
-    html = html.replace('{{DATA_PLACEHOLDER}}', JSON.stringify(insights));
-    html = html.replace('{{SCRIPTS_PLACEHOLDER}}', scripts);
+    <!-- React CDN -->
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+
+    <!-- CDN Libraries -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
+
+    <!-- Application Data -->
+    <script>
+      window.INSIGHT_DATA = ${JSON.stringify(insights)};
+    </script>
+
+    <!-- App Script -->
+    <script>
+      ${INSIGHT_JS}
+    </script>
+  </body>
+</html>`;
 
     return html;
   }
diff --git a/packages/cli/src/services/insight/templates/insight-template.html b/packages/cli/src/services/insight/templates/insight-template.html
deleted file mode 100644
index 2be91da35..000000000
--- a/packages/cli/src/services/insight/templates/insight-template.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Qwen Code Insights</title>
-    <style>
-      {{STYLES_PLACEHOLDER}}
-    </style>
-  </head>
-  <body>
-    <div class="min-h-screen" id="container">
-      <div class="mx-auto max-w-6xl px-6 py-10 md:py-12">
-        <!-- React App Mount Point -->
-        <div id="react-root"></div>
-      </div>
-    </div>
-
-    <!-- React CDN -->
-    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
-    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
-
-    <!-- CDN Libraries -->
-    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
-
-    <!-- Application Data -->
-    <script type="text/babel">
-      window.INSIGHT_DATA = {{DATA_PLACEHOLDER}};
-      {{SCRIPTS_PLACEHOLDER}}
-    </script>
-  </body>
-</html>
diff --git a/packages/cli/src/services/insight/templates/insightTemplate.ts b/packages/cli/src/services/insight/templates/insightTemplate.ts
new file mode 100644
index 000000000..4386278ea
--- /dev/null
+++ b/packages/cli/src/services/insight/templates/insightTemplate.ts
@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright 2025 Qwen Team
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * This file is code-generated; do not edit manually.
+ */
+
+export const INSIGHT_JS =
+  '(function(e,y){"use strict";function S({data:t,dateRangeStr:l}){const{totalMessages:n,totalSessions:a}=t;return e.createElement("header",{className:"mb-8 space-y-3 text-center"},e.createElement("h1",{className:"text-3xl font-semibold text-slate-900 md:text-4xl"},"Qwen Code Insights"),e.createElement("p",{className:"text-sm text-slate-600"},n?`${n} messages across ${a} sessions`:"Your personalized coding journey and patterns",l&&` | ${l}`))}function T({data:t}){const{totalMessages:l=0,totalLinesAdded:n=0,totalLinesRemoved:a=0,totalFiles:s=0}=t,i=Object.keys(t.heatmap||{});let r=0;if(i.length>0){const u=i.map(f=>new Date(f)).map(f=>f.getTime()),p=new Date(Math.min(...u)),h=new Date(Math.max(...u)),b=Math.abs(h.getTime()-p.getTime());r=Math.ceil(b/(1e3*60*60*24))+1}const c=r>0?Math.round(l/r):0;return e.createElement("div",{className:"stats-row"},e.createElement("div",{className:"stat"},e.createElement("div",{className:"stat-value"},l),e.createElement("div",{className:"stat-label"},"Messages")),e.createElement("div",{className:"stat"},e.createElement("div",{className:"stat-value"},"+",n,"/-",a),e.createElement("div",{className:"stat-label"},"Lines")),e.createElement("div",{className:"stat"},e.createElement("div",{className:"stat-value"},s),e.createElement("div",{className:"stat-label"},"Files")),e.createElement("div",{className:"stat"},e.createElement("div",{className:"stat-value"},r),e.createElement("div",{className:"stat-label"},"Days")),e.createElement("div",{className:"stat"},e.createElement("div",{className:"stat-value"},c),e.createElement("div",{className:"stat-label"},"Msgs/Day")))}const D=window.Chart;function W({insights:t}){const l="glass-card p-6",n="text-lg font-semibold tracking-tight text-slate-900";return e.createElement("div",{className:"grid gap-4 md:grid-cols-3 md:gap-6"},e.createElement(z,{currentStreak:t.currentStreak,longestStreak:t.longestStreak,cardClass:l,captionClass:"text-sm font-medium text-slate-500"}),e.createElement(I,{activeHours:t.activeHours,cardClass:l,sectionTitleClass:n}),e.createElement(M,{longestWorkDuration:t.longestWorkDuration,longestWorkDate:t.longestWorkDate,latestActiveTime:t.latestActiveTime,cardClass:l,sectionTitleClass:n}))}function z({currentStreak:t,longestStreak:l,cardClass:n,captionClass:a}){return e.createElement("div",{className:`${n} h-full`},e.createElement("div",{className:"flex items-start justify-between"},e.createElement("div",null,e.createElement("p",{className:a},"Current Streak"),e.createElement("p",{className:"mt-1 text-4xl font-bold text-slate-900"},t,e.createElement("span",{className:"ml-2 text-base font-semibold text-slate-500"},"days"))),e.createElement("span",{className:"rounded-full bg-emerald-50 px-4 py-2 text-sm font-semibold text-emerald-700"},"Longest ",l,"d")))}function I({activeHours:t,cardClass:l,sectionTitleClass:n}){const a=e.useRef(null),s=e.useRef(null);return e.useEffect(()=>{s.current&&s.current.destroy();const i=a.current;if(!i||!window.Chart)return;const r=Array.from({length:24},(u,p)=>`${p}:00`),c=r.map((u,p)=>t[p]||0),o=i.getContext("2d");if(o)return s.current=new D(o,{type:"bar",data:{labels:r,datasets:[{label:"Activity per Hour",data:c,backgroundColor:"rgba(52, 152, 219, 0.7)",borderColor:"rgba(52, 152, 219, 1)",borderWidth:1}]},options:{indexAxis:"y",responsive:!0,maintainAspectRatio:!1,scales:{x:{beginAtZero:!0}},plugins:{legend:{display:!1}}}}),()=>{s.current&&s.current.destroy()}},[t]),e.createElement("div",{className:`${l} h-full`},e.createElement("div",{className:"flex items-center justify-between"},e.createElement("h3",{className:n},"Active Hours"),e.createElement("span",{className:"rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600"},"24h")),e.createElement("div",{className:"mt-4 h-56 w-full"},e.createElement("canvas",{ref:a,className:"w-full h-56"})))}function M({longestWorkDuration:t,longestWorkDate:l,latestActiveTime:n,cardClass:a,sectionTitleClass:s}){return e.createElement("div",{className:`${a} h-full space-y-3`},e.createElement("h3",{className:s},"Work Session"),e.createElement("div",{className:"grid grid-cols-2 gap-3 text-sm text-slate-700"},e.createElement("div",{className:"rounded-xl bg-slate-50 px-3 py-2"},e.createElement("p",{className:"text-xs font-semibold uppercase tracking-wide text-slate-500"},"Longest"),e.createElement("p",{className:"mt-1 text-lg font-semibold text-slate-900"},t,"m")),e.createElement("div",{className:"rounded-xl bg-slate-50 px-3 py-2"},e.createElement("p",{className:"text-xs font-semibold uppercase tracking-wide text-slate-500"},"Date"),e.createElement("p",{className:"mt-1 text-lg font-semibold text-slate-900"},l||"-")),e.createElement("div",{className:"col-span-2 rounded-xl bg-slate-50 px-3 py-2"},e.createElement("p",{className:"text-xs font-semibold uppercase tracking-wide text-slate-500"},"Last Active"),e.createElement("p",{className:"mt-1 text-lg font-semibold text-slate-900"},n||"-"))))}function q({heatmap:t}){return e.createElement("div",{className:"glass-card p-6 mt-4 space-y-4 md:mt-6"},e.createElement("div",{className:"flex items-center justify-between"},e.createElement("h3",{className:"text-lg font-semibold tracking-tight text-slate-900"},"Activity Heatmap"),e.createElement("span",{className:"text-xs font-semibold text-slate-500"},"Past year")),e.createElement("div",{className:"heatmap-container"},e.createElement("div",{className:"min-w-[720px] rounded-xl border border-slate-100 bg-white/70 p-4 shadow-inner shadow-slate-100"},e.createElement(O,{heatmapData:t}))))}function O({heatmapData:t}){const i=new Date,r=new Date(i);r.setFullYear(i.getFullYear()-1);const c=[],o=new Date(r);for(;o<=i;)c.push(new Date(o)),o.setDate(o.getDate()+1);const u=[0,2,4,10,20],p=["#e2e8f0","#a5d8ff","#74c0fc","#339af0","#1c7ed6"];function h(E){if(E===0)return p[0];for(let d=u.length-1;d>=1;d--)if(E>=u[d])return p[d];return p[1]}const b=Math.ceil(c.length/7),f=50,X=20,V=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],C=[];let w=r.getMonth(),A=f;for(let E=0;E<b;E++){const d=new Date(r);d.setDate(d.getDate()+E*7),d.getMonth()!==w&&(w=d.getMonth(),C.push({x:A,text:V[w]}),A=f+E*16)}return e.createElement("svg",{className:"heatmap-svg",width:1e3,height:150,viewBox:"0 0 1000 150"},c.map((E,d)=>{const k=Math.floor(d/7),Z=d%7,R=f+k*16,ee=X+Z*16,v=E.toISOString().split("T")[0],_=t[v]||0,te=h(_);return e.createElement("rect",{key:v,className:"heatmap-day",x:R,y:ee,width:14,height:14,rx:"2",fill:te,"data-date":v,"data-count":_},e.createElement("title",null,v,": ",_," activities"))}),C.map((E,d)=>e.createElement("text",{key:d,x:E.x,y:"15",fontSize:"12",fill:"#64748b"},E.text)),e.createElement("text",{x:f,y:110,fontSize:"12",fill:"#64748b"},"Less"),p.map((E,d)=>{const k=f+40+d*16;return e.createElement("rect",{key:d,x:k,y:120,width:"10",height:"10",rx:"2",fill:E})}),e.createElement("text",{x:f+40+p.length*16+5,y:129,fontSize:"12",fill:"#64748b",width:14},"More"))}function m({children:t}){if(!t||typeof t!="string")return t;const l=t.split(/(\\*\\*.*?\\*\\*)/g);return e.createElement(e.Fragment,null,l.map((n,a)=>n.startsWith("**")&&n.endsWith("**")&&n.length>=4?e.createElement("strong",{key:a},n.slice(2,-2)):n))}function x({text:t,label:l="Copy"}){const[n,a]=e.useState(!1),s=()=>{navigator.clipboard.writeText(t).then(()=>{a(!0),setTimeout(()=>a(!1),2e3)})};return e.createElement("button",{className:"copy-btn",onClick:s},n?"Copied!":l)}function F({qualitative:t}){const{atAGlance:l}=t;return l?e.createElement("div",{className:"at-a-glance"},e.createElement("div",{className:"glance-title"},"At a Glance"),e.createElement("div",{className:"glance-sections"},e.createElement("div",{className:"glance-section"},e.createElement("strong",null,"What\'s working:")," ",e.createElement(m,null,l.whats_working),e.createElement("a",{href:"#section-wins",className:"see-more"},"Impressive Things You Did →")),e.createElement("div",{className:"glance-section"},e.createElement("strong",null,"What\'s hindering you:")," ",e.createElement(m,null,l.whats_hindering),e.createElement("a",{href:"#section-friction",className:"see-more"},"Where Things Go Wrong →")),e.createElement("div",{className:"glance-section"},e.createElement("strong",null,"Quick wins to try:")," ",e.createElement(m,null,l.quick_wins),e.createElement("a",{href:"#section-features",className:"see-more"},"Features to Try →")),e.createElement("div",{className:"glance-section"},e.createElement("strong",null,"Ambitious workflows:")," ",e.createElement(m,null,l.ambitious_workflows),e.createElement("a",{href:"#section-horizon",className:"see-more"},"On the Horizon →")))):null}function j(){return e.createElement("nav",{className:"nav-toc"},e.createElement("a",{href:"#section-work"},"What You Work On"),e.createElement("a",{href:"#section-usage"},"How You Use QC"),e.createElement("a",{href:"#section-wins"},"Impressive Things"),e.createElement("a",{href:"#section-friction"},"Where Things Go Wrong"),e.createElement("a",{href:"#section-features"},"Features to Try"),e.createElement("a",{href:"#section-patterns"},"New Usage Patterns"),e.createElement("a",{href:"#section-horizon"},"On the Horizon"))}function H({qualitative:t,topGoals:l,topTools:n}){const{projectAreas:a}=t,s=Array.isArray(n)?Object.fromEntries(n):n;return e.createElement(e.Fragment,null,e.createElement("h2",{id:"section-work",className:"text-xl font-semibold text-slate-900 mt-8 mb-4"},"What You Work On"),Array.isArray(a==null?void 0:a.areas)&&a.areas.length>0&&e.createElement("div",{className:"project-areas mb-6"},a.areas.map((i,r)=>e.createElement("div",{key:r,className:"project-area"},e.createElement("div",{className:"area-header"},e.createElement("span",{className:"area-name"},i.name),e.createElement("span",{className:"area-count"},"~",i.session_count," sessions")),e.createElement("div",{className:"area-desc"},e.createElement(m,null,i.description))))),e.createElement("div",{style:{display:"grid",gridTemplateColumns:"repeat(2, 1fr)",gap:"24px",marginBottom:"24px"}},l&&Object.keys(l).length>0&&e.createElement(g,{data:l,title:"What You Wanted",color:"#0ea5e9"}),s&&Object.keys(s).length>0&&e.createElement(g,{data:s,title:"Top Tools Used",color:"#6366f1"})))}function Q({qualitative:t,insights:l}){const{interactionStyle:n}=t;return n?e.createElement(e.Fragment,null,e.createElement("h2",{id:"section-usage",className:"text-xl font-semibold text-slate-900 mt-8 mb-4"},"How You Use Qwen Code"),e.createElement("div",{className:"narrative"},e.createElement("p",null,e.createElement(m,null,n.narrative)),n.key_pattern&&e.createElement("div",{className:"key-insight"},e.createElement("strong",null,"Key pattern:")," ",e.createElement(m,null,n.key_pattern))),e.createElement(W,{insights:l}),e.createElement(q,{heatmap:l.heatmap})):null}function $({qualitative:t,primarySuccess:l,outcomes:n}){const{impressiveWorkflows:a}=t;return a?e.createElement(e.Fragment,null,e.createElement("h2",{id:"section-wins",className:"text-xl font-semibold text-slate-900 mt-8 mb-4"},"Impressive Things You Did"),a.intro&&e.createElement("p",{className:"section-intro"},e.createElement(m,null,a.intro)),e.createElement("div",{className:"big-wins"},Array.isArray(a.impressive_workflows)&&a.impressive_workflows.map((s,i)=>e.createElement("div",{key:i,className:"big-win"},e.createElement("div",{className:"big-win-title"},s.title),e.createElement("div",{className:"big-win-desc"},e.createElement(m,null,s.description))))),e.createElement("div",{style:{display:"grid",gridTemplateColumns:"repeat(2, 1fr)",gap:"24px",marginTop:"24px",marginBottom:"24px"}},l&&Object.keys(l).length>0&&e.createElement(g,{data:l,title:"What Helped Most (Qwen\'s Capabilities)",color:"#3b82f6",allowedKeys:["fast_accurate_search","correct_code_edits","good_explanations","proactive_help","multi_file_changes","good_debugging"]}),n&&Object.keys(n).length>0&&e.createElement(g,{data:n,title:"Outcomes",color:"#8b5cf6",allowedKeys:["fully_achieved","mostly_achieved","partially_achieved","not_achieved","unclear_from_transcript"]}))):null}function P(t){return t==="unclear_from_transcript"?"Unclear":t.split("_").map(l=>l.charAt(0).toUpperCase()+l.slice(1)).join(" ")}function g({data:t,title:l,color:n="#3b82f6",allowedKeys:a=null}){if(!t||Object.keys(t).length===0)return null;let s=Object.entries(t);if(a&&(s=s.filter(([r])=>a.includes(r))),s.sort((r,c)=>c[1]-r[1]),s.length===0)return null;const i=Math.max(...s.map(([,r])=>r));return e.createElement("div",{className:"bar-chart-card",style:{flex:1,minWidth:0,backgroundColor:"#ffffff",borderRadius:"12px",padding:"20px",boxShadow:"0 1px 3px rgba(0, 0, 0, 0.08)",border:"1px solid #e2e8f0"}},e.createElement("h3",{style:{fontSize:"13px",fontWeight:700,color:"#64748b",marginTop:0,marginBottom:"16px",textTransform:"uppercase",letterSpacing:"0.5px"}},l),e.createElement("div",{className:"bar-chart",style:{display:"flex",flexDirection:"column",gap:"10px"}},s.map(([r,c])=>{const o=i>0?c/i*100:0;return e.createElement("div",{key:r,className:"bar-row",style:{display:"flex",alignItems:"center",gap:"12px"}},e.createElement("div",{className:"bar-label",style:{width:"130px",fontSize:"13px",color:"#475569",textAlign:"left",flexShrink:0,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}},P(r)),e.createElement("div",{className:"bar-wrapper",style:{flex:1,display:"flex",alignItems:"center",gap:"10px",minWidth:0}},e.createElement("div",{className:"bar-bg",style:{flex:1,height:"8px",backgroundColor:"#f1f5f9",borderRadius:"4px",overflow:"hidden"}},e.createElement("div",{className:"bar-fill",style:{width:`${o}%`,height:"100%",backgroundColor:n,borderRadius:"4px",transition:"width 0.3s ease"}})),e.createElement("span",{className:"bar-value",style:{fontSize:"13px",fontWeight:600,color:"#475569",minWidth:"24px",textAlign:"right"}},c)))})))}function Y({qualitative:t,satisfaction:l,friction:n}){const{frictionPoints:a}=t;return a?e.createElement(e.Fragment,null,e.createElement("h2",{id:"section-friction",className:"text-xl font-semibold text-slate-900 mt-8 mb-4"},"Where Things Go Wrong"),a.intro&&e.createElement("p",{className:"section-intro"},e.createElement(m,null,a.intro)),e.createElement("div",{className:"friction-categories"},Array.isArray(a.categories)&&a.categories.map((s,i)=>e.createElement("div",{key:i,className:"friction-category"},e.createElement("div",{className:"friction-title"},s.category),e.createElement("div",{className:"friction-desc"},e.createElement(m,null,s.description)),Array.isArray(s.examples)&&s.examples.length>0&&e.createElement("ul",{className:"friction-examples"},s.examples.map((r,c)=>e.createElement("li",{key:c},e.createElement(m,null,r))))))),e.createElement("div",{style:{display:"grid",gridTemplateColumns:"repeat(2, 1fr)",gap:"24px",marginTop:"24px",marginBottom:"24px"}},n&&Object.keys(n).length>0&&e.createElement(g,{data:n,title:"Primary Friction Types",color:"#ef4444",allowedKeys:["misunderstood_request","wrong_approach","buggy_code","user_rejected_action","excessive_changes"]}),l&&Object.keys(l).length>0&&e.createElement(g,{data:l,title:"Inferred Satisfaction (model-estimated)",color:"#10b981",allowedKeys:["happy","satisfied","likely_satisfied","dissatisfied","frustrated"]}))):null}function B({additions:t}){const[l,n]=e.useState(new Array(t.length).fill(!0)),[a,s]=e.useState(!1),i=o=>{const u=l.map((p,h)=>h===o?!p:p);n(u)},r=()=>{const o=t.filter((u,p)=>l[p]).map(u=>u.addition).join(`\n\n`);o&&navigator.clipboard.writeText(o).then(()=>{s(!0),setTimeout(()=>s(!1),2e3)})},c=l.filter(Boolean).length;return e.createElement("div",{className:"qwen-md-section"},e.createElement("h3",null,"Suggested QWEN.md Additions"),e.createElement("p",{className:"text-xs text-slate-500 mb-3"},"Just copy this into Qwen Code to add it to your QWEN.md."),e.createElement("div",{className:"qwen-md-actions",style:{marginBottom:"12px"}},e.createElement("button",{className:`copy-all-btn ${a?"copied":""}`,onClick:r,disabled:c===0},a?"Copied All!":`Copy All Checked (${c})`)),t.map((o,u)=>e.createElement("div",{key:u,className:"qwen-md-item"},e.createElement("input",{type:"checkbox",checked:l[u],onChange:()=>i(u),className:"cmd-checkbox"}),e.createElement("div",{style:{flex:1}},e.createElement("code",{className:"cmd-code"},o.addition),e.createElement("div",{className:"cmd-why"},e.createElement(m,null,o.why))),e.createElement(x,{text:o.addition}))))}function L({qualitative:t}){const{improvements:l}=t;return l?e.createElement(e.Fragment,null,e.createElement("h2",{id:"section-features",className:"text-xl font-semibold text-slate-900 mt-8 mb-4"},"Existing QC Features to Try"),Array.isArray(l.Qwen_md_additions)&&l.Qwen_md_additions.length>0&&e.createElement(B,{additions:l.Qwen_md_additions}),e.createElement("p",{className:"text-xs text-slate-500 mb-3"},"Just copy this into Qwen Code and it\'ll set it up for you."),e.createElement("div",{className:"features-section"},Array.isArray(l.features_to_try)&&l.features_to_try.map((n,a)=>e.createElement("div",{key:a,className:"feature-card"},e.createElement("div",{className:"feature-title"},n.feature),e.createElement("div",{className:"feature-oneliner"},e.createElement(m,null,n.one_liner)),e.createElement("div",{className:"feature-why"},e.createElement("strong",null,"Why for you:")," ",e.createElement(m,null,n.why_for_you)),e.createElement("div",{className:"feature-examples"},e.createElement("div",{className:"feature-example"},e.createElement("div",{className:"example-code-row"},e.createElement("code",{className:"example-code"},n.example_code),e.createElement(x,{text:n.example_code}))))))),e.createElement("h2",{id:"section-patterns",className:"text-xl font-semibold text-slate-900 mt-8 mb-4"},"New Ways to Use Qwen Code"),e.createElement("p",{className:"text-xs text-slate-500 mb-3"},"Just copy this into Qwen Code and it\'ll walk you through it."),e.createElement("div",{className:"patterns-section"},Array.isArray(l.usage_patterns)&&l.usage_patterns.map((n,a)=>e.createElement("div",{key:a,className:"pattern-card"},e.createElement("div",{className:"pattern-title"},n.title),e.createElement("div",{className:"pattern-summary"},e.createElement(m,null,n.suggestion)),e.createElement("div",{className:"pattern-detail"},e.createElement(m,null,n.detail)),e.createElement("div",{className:"copyable-prompt-section"},e.createElement("div",{className:"prompt-label"},"Paste into Qwen Code:"),e.createElement("div",{className:"copyable-prompt-row"},e.createElement("code",{className:"copyable-prompt"},n.copyable_prompt),e.createElement(x,{text:n.copyable_prompt}))))))):null}function G({qualitative:t}){const{futureOpportunities:l}=t;return l?e.createElement(e.Fragment,null,e.createElement("h2",{id:"section-horizon",className:"text-xl font-semibold text-slate-900 mt-8 mb-4"},"On the Horizon"),l.intro&&e.createElement("p",{className:"section-intro"},e.createElement(m,null,l.intro)),e.createElement("div",{className:"horizon-section"},Array.isArray(l.opportunities)&&l.opportunities.map((n,a)=>e.createElement("div",{key:a,className:"horizon-card"},e.createElement("div",{className:"horizon-title"},n.title),e.createElement("div",{className:"horizon-possible"},e.createElement(m,null,n.whats_possible)),e.createElement("div",{className:"horizon-tip"},e.createElement("strong",null,"Getting started:")," ",e.createElement(m,null,n.how_to_try)),e.createElement("div",{className:"pattern-prompt"},e.createElement("div",{className:"prompt-label"},"Paste into Qwen Code:"),e.createElement("div",{style:{display:"flex",alignItems:"flex-start",gap:"8px"}},e.createElement("code",{style:{flex:1}},n.copyable_prompt),e.createElement(x,{text:n.copyable_prompt}))))))):null}function U({qualitative:t}){const{memorableMoment:l}=t;return l?e.createElement("div",{className:"fun-ending"},e.createElement("div",{className:"fun-headline"},\'"\',l.headline,\'"\'),e.createElement("div",{className:"fun-detail"},e.createElement(m,null,l.detail))):null}function K({data:t}){if(!t)return e.createElement("div",{className:"text-center text-slate-600"},"No insight data available");const l=Object.keys(t.heatmap||{});let n="";if(l.length>0){const s=l.map(o=>new Date(o)).map(o=>o.getTime()),i=new Date(Math.min(...s)),r=new Date(Math.max(...s)),c=o=>o.toISOString().split("T")[0];n=`${c(i)} to ${c(r)}`}return e.createElement("div",null,e.createElement(S,{data:t,dateRangeStr:n}),t.qualitative&&e.createElement(e.Fragment,null,e.createElement(F,{qualitative:t.qualitative}),e.createElement(j,null)),e.createElement(T,{data:t}),t.qualitative&&e.createElement(e.Fragment,null,e.createElement(H,{qualitative:t.qualitative,topGoals:t.topGoals,topTools:t.topTools})),t.qualitative&&e.createElement(e.Fragment,null,e.createElement(Q,{qualitative:t.qualitative,insights:t})),t.qualitative&&e.createElement(e.Fragment,null,e.createElement($,{qualitative:t.qualitative,primarySuccess:t.primarySuccess,outcomes:t.outcomes}),e.createElement(Y,{qualitative:t.qualitative,satisfaction:t.satisfaction,friction:t.friction}),e.createElement(L,{qualitative:t.qualitative}),e.createElement(G,{qualitative:t.qualitative}),e.createElement(U,{qualitative:t.qualitative})),e.createElement(J,null))}function J(){const[t,l]=e.useState(!1),n=async()=>{const a=document.getElementById("container");if(!a||!window.html2canvas){alert("Export functionality is not available.");return}l(!0);try{const i=(await window.html2canvas(a,{scale:2,useCORS:!0,logging:!1})).toDataURL("image/png"),r=document.createElement("a");r.href=i,r.download=`qwen-insights-${new Date().toISOString().slice(0,10)}.png`,r.click()}catch(s){console.error("Export error:",s),alert("Failed to export image. Please try again.")}finally{l(!1)}};return e.createElement("div",{className:"mt-6 flex justify-center"},e.createElement("button",{onClick:n,disabled:t,className:"group inline-flex items-center gap-2 rounded-full bg-slate-900 px-5 py-3 text-sm font-semibold text-white shadow-soft transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-400 hover:-translate-y-[1px] hover:shadow-lg active:translate-y-[1px] disabled:opacity-50"},t?"Exporting...":"Export as Image",e.createElement("span",{className:"text-slate-200 transition group-hover:translate-x-0.5"},"→")))}const N=document.getElementById("react-root");N&&window.INSIGHT_DATA&&y?y.createRoot(N).render(e.createElement(K,{data:window.INSIGHT_DATA})):console.error("Failed to mount React app:",{container:!!N,data:!!window.INSIGHT_DATA,ReactDOM:!!y})})(React,ReactDOM);';
+export const INSIGHT_CSS =
+  '*,:before,:after,::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: #3b82f680;--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border:0 solid #e5e7eb}:before,:after{--tw-content: ""}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5}body{line-height:inherit;margin:0;background-image:linear-gradient(to bottom right,var(--tw-gradient-stops));--tw-gradient-from: #f8fafc var(--tw-gradient-from-position);--tw-gradient-to: #f1f5f9 var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to);--tw-text-opacity: 1;min-height:100vh;color:rgb(15 23 42 / var(--tw-text-opacity, 1));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.glass-card{--tw-border-opacity: 1;border-width:1px;border-color:rgb(226 232 240 / var(--tw-border-opacity, 1));--tw-shadow: 0 10px 40px #0f172a14;--tw-shadow-colored: 0 10px 40px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);--tw-backdrop-blur: blur(8px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);background-color:#fff9;border-radius:1rem}.col-span-2{grid-column:span 2 / span 2}.mx-auto{margin-left:auto;margin-right:auto}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.h-56{height:14rem}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-full{width:100%}.min-w-\\[720px\\]{min-width:720px}.max-w-6xl{max-width:72rem}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-slate-200>:not([hidden])~:not([hidden]){--tw-divide-opacity: 1;border-color:rgb(226 232 240 / var(--tw-divide-opacity, 1))}.overflow-x-auto{overflow-x:auto}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:1.25rem}.border{border-width:1px}.border-slate-100{--tw-border-opacity: 1;border-color:rgb(241 245 249 / var(--tw-border-opacity, 1))}.bg-emerald-50{--tw-bg-opacity: 1;background-color:rgb(236 253 245 / var(--tw-bg-opacity, 1))}.bg-slate-100{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}.bg-slate-50{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.bg-slate-900{--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity, 1))}.bg-white\\/70{background-color:#ffffff73}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-slate-50{--tw-gradient-from: #f8fafc var(--tw-gradient-from-position);--tw-gradient-to: #f8fafc00 var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.via-white{--tw-gradient-to: #ffffff00 var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #ffffff var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-slate-100{--tw-gradient-to: #f1f5f9 var(--tw-gradient-to-position)}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.tracking-\\[0\\.2em\\]{letter-spacing:.2em}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.text-emerald-700{--tw-text-opacity: 1;color:rgb(4 120 87 / var(--tw-text-opacity, 1))}.text-rose-700{--tw-text-opacity: 1;color:rgb(190 18 60 / var(--tw-text-opacity, 1))}.text-slate-200{--tw-text-opacity: 1;color:rgb(226 232 240 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-slate-500{--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.text-slate-600{--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity, 1))}.text-slate-700{--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity, 1))}.text-slate-900{--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.shadow-inner{--tw-shadow: inset 0 2px 4px 0 #0000000d;--tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-soft{--tw-shadow: 0 10px 40px #0f172a14;--tw-shadow-colored: 0 10px 40px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-slate-100{--tw-shadow-color: #f1f5f9;--tw-shadow: var(--tw-shadow-colored)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:-translate-y-\\[1px\\]:hover{--tw-translate-y: -1px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:shadow-lg:hover{--tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.focus-visible\\:outline:focus-visible{outline-style:solid}.focus-visible\\:outline-2:focus-visible{outline-width:2px}.focus-visible\\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\\:outline-slate-400:focus-visible{outline-color:#94a3b8}.active\\:translate-y-\\[1px\\]:active{--tw-translate-y: 1px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:translate-x-0\\.5{--tw-translate-x: .125rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (min-width: 768px){.md\\:mt-6{margin-top:1.5rem}.md\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\\:gap-6{gap:1.5rem}.md\\:py-12{padding-top:3rem;padding-bottom:3rem}.md\\:text-4xl{font-size:2.25rem;line-height:2.5rem}}.heatmap-container{width:100%;overflow-x:auto}.heatmap-svg{min-width:720px}.heatmap-day{cursor:pointer}.heatmap-day:hover{stroke:#00000024;stroke-width:1px}.heatmap-legend{display:flex;align-items:center;gap:4px;font-size:12px;color:#64748b;margin-top:8px}.heatmap-legend-item{width:10px;height:10px;border-radius:2px}.nav-toc{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 32px;padding:16px;background:#fff;border-radius:8px;border:1px solid #e2e8f0}.nav-toc a{font-size:12px;color:#64748b;text-decoration:none;padding:6px 12px;border-radius:6px;background:#f1f5f9;transition:all .15s}.nav-toc a:hover{background:#e2e8f0;color:#334155}.at-a-glance{background:linear-gradient(135deg,#fef3c7,#fde68a);border:1px solid #f59e0b;border-radius:12px;padding:20px 24px;margin-bottom:32px}.glance-title{font-size:16px;font-weight:700;color:#92400e;margin-bottom:16px}.glance-sections{display:flex;flex-direction:column;gap:12px}.glance-section{font-size:14px;color:#78350f;line-height:1.6}.glance-section strong{color:#92400e;font-weight:700}.see-more{color:#b45309;text-decoration:none;font-size:13px;white-space:nowrap;margin-left:4px}.see-more:hover{text-decoration:underline}.project-areas{display:flex;flex-direction:column;gap:12px;margin-bottom:32px}.project-area{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:16px}.area-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.area-name{font-weight:600;font-size:15px;color:#0f172a}.area-count{font-size:12px;color:#64748b;background:#f1f5f9;padding:2px 8px;border-radius:4px}.area-desc{font-size:14px;color:#475569;line-height:1.5}.narrative{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-bottom:24px}.narrative p{margin-top:0;margin-bottom:12px;font-size:14px;color:#475569;line-height:1.7}.key-insight{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:12px 16px;margin-top:12px;font-size:14px;color:#166534}.section-intro{font-size:14px;color:#64748b;margin-bottom:16px}.big-wins{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}.big-win{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:16px}.big-win-title{font-weight:600;font-size:15px;color:#166534;margin-bottom:8px}.big-win-desc{font-size:14px;color:#15803d;line-height:1.5}.friction-categories{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.friction-category{background:#fef2f2;border:1px solid #fca5a5;border-radius:8px;padding:16px}.friction-title{font-weight:600;font-size:15px;color:#991b1b;margin-bottom:6px}.friction-desc{font-size:13px;color:#7f1d1d;margin-bottom:10px}.friction-examples{margin:0 0 0 10px;padding:0;font-size:13px;color:#334155;list-style-type:disc}.friction-examples li{margin-bottom:4px}.qwen-md-section{background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:12px;margin-bottom:20px}.qwen-md-section h3{font-size:13px;font-weight:600;color:#1e40af;margin:0 0 8px}.qwen-md-actions{margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid #dbeafe}.copy-all-btn{background:#2563eb;color:#fff;border:none;border-radius:4px;padding:4px 10px;font-size:11px;cursor:pointer;font-weight:500;transition:all .2s}.copy-all-btn:hover{background:#1d4ed8}.copy-all-btn.copied{background:#16a34a}.qwen-md-item{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;padding:8px 0;border-bottom:1px solid #dbeafe}.qwen-md-item:last-child{border-bottom:none}.cmd-checkbox{margin-top:2px}.cmd-code{background:#fff;padding:6px 10px;border-radius:4px;font-size:11px;color:#1e40af;border:1px solid #bfdbfe;font-family:monospace;display:block;white-space:pre-wrap;word-break:break-word;flex:1}.cmd-why{font-size:11px;color:#64748b;width:100%;padding-left:20px;margin-top:4px}.features-section,.patterns-section{display:flex;flex-direction:column;gap:12px;margin:16px 0}.feature-card{background:#f0fdf4;border:1px solid #86efac;border-radius:8px;padding:16px}.pattern-card{background:#f0f9ff;border:1px solid #7dd3fc;border-radius:8px;padding:16px}.feature-title,.pattern-title{font-weight:600;font-size:15px;color:#0f172a;margin-bottom:6px}.feature-oneliner,.pattern-summary{font-size:14px;color:#475569;margin-bottom:8px}.feature-why,.pattern-detail{font-size:13px;color:#334155;line-height:1.5}.feature-examples{margin-top:12px}.feature-example{padding:8px 0;border-top:1px solid #d1fae5}.feature-example:first-child{border-top:none}.example-code-row,.copyable-prompt-row{display:flex;align-items:flex-start;gap:8px}.example-code{flex:1;background:#f1f5f9;padding:8px 12px;border-radius:4px;font-family:monospace;font-size:12px;color:#334155;overflow-x:auto;white-space:pre-wrap}.copyable-prompt-section{margin-top:12px;padding-top:12px;border-top:1px solid #e2e8f0}.copyable-prompt{flex:1;background:#f8fafc;padding:10px 12px;border-radius:4px;font-family:monospace;font-size:12px;color:#334155;border:1px solid #e2e8f0;white-space:pre-wrap;line-height:1.5}.prompt-label{font-size:11px;font-weight:600;text-transform:uppercase;color:#64748b;margin-bottom:6px}.copy-btn{background:#e2e8f0;border:none;border-radius:4px;padding:4px 8px;font-size:11px;cursor:pointer;color:#475569;flex-shrink:0;transition:all .2s}.copy-btn:hover{background:#cbd5e1}.horizon-section{display:flex;flex-direction:column;gap:16px}.horizon-card{background:linear-gradient(135deg,#faf5ff,#f5f3ff);border:1px solid #c4b5fd;border-radius:8px;padding:16px}.horizon-title{font-weight:600;font-size:15px;color:#5b21b6;margin-bottom:8px}.horizon-possible{font-size:14px;color:#334155;margin-bottom:10px;line-height:1.5}.horizon-tip{font-size:13px;color:#6b21a8;background:#fff9;padding:8px 12px;border-radius:4px}.pattern-prompt{background:#f8fafc;padding:12px;border-radius:6px;margin-top:12px;border:1px solid #e2e8f0;display:flex;flex-direction:column;gap:8px}.pattern-prompt code{font-family:monospace;font-size:12px;color:#334155;display:block;white-space:pre-wrap}.fun-ending{background:linear-gradient(135deg,#fef3c7,#fde68a);border:1px solid #fbbf24;border-radius:12px;padding:24px;margin-top:40px;text-align:center}.fun-headline{font-size:18px;font-weight:600;color:#78350f;margin-bottom:8px}.fun-detail{font-size:14px;color:#92400e}.stats-row{display:flex;gap:24px;margin-bottom:40px;padding:20px 0;border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;flex-wrap:wrap}.stat{text-align:center}.stat-value{font-size:24px;font-weight:700;color:#0f172a}.stat-label{font-size:11px;color:#64748b;text-transform:uppercase}@media (max-width: 640px){.stats-row{justify-content:center}}';