feat: comprehensive documentation and demo updates

- Update READMEs and docs across multiple languages
- Enhance interactive demos for Agent, LLM, VLM, Audio, Image Gen, Terminal, and Web Basics
- Add new appendix sections for Database and IDE intros
- Update VitePress config, theme, and utility scripts
- Clean up unused assets and components

docs/.vitepress/theme/components/appendix/terminal-intro/CookedRawDemo.vue

@@ -1,25 +1,19 @@
 <template>
   <div class="cooked-raw-demo">
     <div class="mode-switch">
-      <button 
-        :class="{ active: mode === 'cooked' }" 
-        @click="setMode('cooked')"
-      >
+      <button :class="{ active: mode === 'cooked' }" @click="setMode('cooked')">
         🥘 Cooked Mode (Standard)
       </button>
-      <button 
-        :class="{ active: mode === 'raw' }" 
-        @click="setMode('raw')"
-      >
+      <button :class="{ active: mode === 'raw' }" @click="setMode('raw')">
         🥩 Raw Mode (Vim/Games)
       </button>
     </div>
 
     <div class="demo-container" @click="focusInput">
       <!-- Hidden Input for capturing keystrokes -->
-      <input 
+      <input
         ref="inputRef"
-        type="text" 
+        type="text"
         class="hidden-input"
         @keydown="handleKey"
         @blur="isFocused = false"
@@ -28,12 +22,13 @@
 
       <!-- Visualization -->
       <div class="flow-diagram">
-        
         <!-- 1. User Input -->
         <div class="stage user-input" :class="{ focused: isFocused }">
           <div class="stage-title">1. Keyboard Input</div>
           <div class="key-visual">
-            <span v-if="lastPressedKey" class="key-cap">{{ lastPressedKey }}</span>
+            <span v-if="lastPressedKey" class="key-cap">{{
+              lastPressedKey
+            }}</span>
             <span v-else class="placeholder">Type here...</span>
           </div>
           <div class="status-text" v-if="!isFocused">Click to focus</div>
@@ -42,7 +37,10 @@
         <div class="arrow">⬇</div>
 
         <!-- 2. OS Buffer (Only for Cooked) -->
-        <div class="stage buffer" :class="{ disabled: mode === 'raw', active: mode === 'cooked' }">
+        <div
+          class="stage buffer"
+          :class="{ disabled: mode === 'raw', active: mode === 'cooked' }"
+        >
           <div class="stage-title">
             2. Line Buffer (Kernel)
             <span class="badge" v-if="mode === 'cooked'">Active</span>
@@ -50,7 +48,9 @@
           </div>
           <div class="buffer-content">
             <template v-if="mode === 'cooked'">
-              <span v-for="(char, i) in buffer" :key="i" class="char">{{ char }}</span>
+              <span v-for="(char, i) in buffer" :key="i" class="char">{{
+                char
+              }}</span>
               <span class="cursor">_</span>
             </template>
             <template v-else>
@@ -58,7 +58,9 @@
             </template>
           </div>
           <div class="explanation">
-            <span v-if="mode === 'cooked'">Waiting for Enter... (Backspace works)</span>
+            <span v-if="mode === 'cooked'"
+              >Waiting for Enter... (Backspace works)</span
+            >
             <span v-else>No buffering. Every key is sent immediately.</span>
           </div>
         </div>
@@ -77,7 +79,6 @@
             </div>
           </div>
         </div>
-
       </div>
     </div>
   </div>
@@ -110,9 +111,9 @@ const focusInput = () => {
 
 const handleKey = (e) => {
   e.preventDefault()
-  
+
   const key = e.key
-  
+
   // Visual feedback
   if (key === ' ') lastPressedKey.value = 'Space'
   else if (key === 'Enter') lastPressedKey.value = 'Enter'
@@ -122,7 +123,16 @@ const handleKey = (e) => {
 
   // Clear visual feedback after delay
   setTimeout(() => {
-    if (lastPressedKey.value === (key === ' ' ? 'Space' : (key === 'Enter' ? 'Enter' : (key === 'Backspace' ? '⌫' : key)))) {
+    if (
+      lastPressedKey.value ===
+      (key === ' '
+        ? 'Space'
+        : key === 'Enter'
+          ? 'Enter'
+          : key === 'Backspace'
+            ? '⌫'
+            : key)
+    ) {
       // lastPressedKey.value = '' // Optional: keep last key visible
     }
   }, 500)
@@ -345,7 +355,8 @@ const handleRawMode = (e) => {
   color: #ccc;
 }
 
-.cursor, .app-cursor {
+.cursor,
+.app-cursor {
   display: inline-block;
   width: 8px;
   background: currentColor;
@@ -353,10 +364,20 @@ const handleRawMode = (e) => {
 }
 
 @keyframes pop {
-  0% { transform: scale(0.9); }
-  50% { transform: scale(1.1); }
-  100% { transform: scale(1); }
+  0% {
+    transform: scale(0.9);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
 }
 
-@keyframes blink { 50% { opacity: 0; } }
-</style>
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+}
+</style>