feat: add Status and RagChat pages with corresponding components and styles

- Created StatusPage component with system stats, configuration, and indexed documents overview.
- Added RagChatPage component for chat functionality.
- Introduced global CSS styles for light and dark themes, including utility classes and animations.
- Defined TypeScript types for compliance, documents, and themes.
- Configured Tailwind CSS for dynamic theming and custom animations.
- Set up TypeScript configuration for app and node environments.
- Initialized Vite configuration for React project.

src/pages/Status/StatusPage.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import { useTheme } from '../../contexts/ThemeContext';
+import { Content } from '../../components/layout/Content';
+import { TPattern } from '../../components/common/TPattern';
+import { mockDocs } from '../../data';
+
+const StatsCard = ({ label, value, accent = false }: {
+  label: string;
+  value: number;
+  accent?: boolean;
+}) => {
+  const { theme, isDark } = useTheme();
+
+  return (
+    <div style={{
+      padding: 20,
+      background: theme.bgCard,
+      borderRadius: 12,
+      border: `1px solid ${accent ? theme.accent : theme.border}`,
+      position: 'relative',
+      overflow: 'hidden',
+      boxShadow: !isDark ? '0 2px 8px rgba(226,0,116,0.06)' : 'none',
+    }}>
+      <div style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        height: 3,
+        background: theme.gradientAccent,
+      }} />
+      <div className="mono" style={{ fontSize: 11, color: theme.text3, marginBottom: 8, letterSpacing: '1px' }}>{label}</div>
+      <div className="mono" style={{ fontSize: 32, fontWeight: 700, color: accent ? theme.accent : theme.text }}>{value}</div>
+    </div>
+  );
+};
+
+export const StatusPage: React.FC = () => {
+  const { theme, isDark } = useTheme();
+
+  return (
+    <Content>
+      <TPattern />
+      {/* System Stats */}
+      <section style={{ marginBottom: 48 }}>
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(4, 1fr)',
+          gap: 16,
+        }}>
+          <StatsCard label="DOCUMENTS" value={3} />
+          <StatsCard label="CHUNKS" value={214} />
+          <StatsCard label="DIMENSIONS" value={1536} />
+          <StatsCard label="CLAUSES" value={214} accent />
+        </div>
+      </section>
+
+      {/* Configuration */}
+      <section style={{ marginBottom: 48 }}>
+        <h2 style={{
+          fontSize: 14,
+          fontWeight: 600,
+          color: theme.accent,
+          marginBottom: 20,
+          letterSpacing: '1px',
+        }}>SYSTEM CONFIGURATION</h2>
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr',
+          gap: 12,
+        }}>
+          {[
+            ['LLM Model', 'GPT-4o'],
+            ['Embedding', 'text-embedding-3-small'],
+            ['Vector DB', 'ChromaDB'],
+            ['Retrieval', 'Hybrid (Vector + BM25)'],
+            ['Top-K', '5 candidates'],
+            ['Chunk Size', '500-1000 tokens'],
+            ['Overlap', '100 tokens'],
+            ['Temperature', '0.1'],
+          ].map(([k, v]) => (
+            <div key={k} style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              padding: 16,
+              background: theme.bgCard,
+              borderRadius: 10,
+              border: `1px solid ${theme.border}`,
+              boxShadow: !isDark ? '0 2px 8px rgba(226,0,116,0.04)' : 'none',
+            }}>
+              <span className="mono" style={{ fontSize: 12, color: theme.text3 }}>{k}</span>
+              <span style={{ fontSize: 14, fontWeight: 500 }}>{v}</span>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Indexed Docs Overview */}
+      <section>
+        <h2 style={{
+          fontSize: 14,
+          fontWeight: 600,
+          color: theme.accent,
+          marginBottom: 20,
+          letterSpacing: '1px',
+        }}>DOCUMENT INDEX</h2>
+        {mockDocs.map(d => (
+          <div key={d.id} style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            padding: 16,
+            background: theme.bgCard,
+            borderRadius: 10,
+            marginBottom: 10,
+            border: `1px solid ${theme.border}`,
+          }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+              <span style={{ fontSize: 14 }}>{d.name}</span>
+              <span className="mono" style={{ fontSize: 11, color: theme.text3 }}>{d.size}</span>
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+              <span className="mono" style={{ fontSize: 12, color: theme.text2 }}>{d.chunks} chunks</span>
+              <div style={{
+                padding: '4px 12px',
+                background: theme.green,
+                borderRadius: 6,
+              }}>
+                <span className="mono" style={{ fontSize: 10, fontWeight: 600, color: '#fff' }}>INDEXED</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </section>
+    </Content>
+  );
+};