alive-ai 0.1.11 → 0.1.13

package/README.md

@@ -33,10 +33,14 @@ The emotional layer now has real runtime consequences:
 | Internal body state | Energy, arousal, certainty, social satiety, cognitive load, connection craving, body sensations, and somatic memories. | The body state is persisted and feeds prompt tone, sleep/rest behavior, and whether she feels steady, overloaded, touchy, open, or withdrawn. |
 | Circadian rhythm | Phase, sleep pressure, sleep debt, forced-awake windows, sleep cycle ID, wake time, and sleepiness. | She becomes sleepy, slows down, falls asleep, stops outward proactive behavior while asleep, can be woken by a message, recovers sleep debt, and wakes with lower or higher energy depending on rest. |
 | Dreams | One normalized dream per sleep cycle, generated from memory fragments and emotion tags. | Dreams are saved, can appear in morning context, and are exposed in the dashboard and static Pages demo. |
+| Narrative | Relationship phase (first_meeting → bonded) tracked per user. Key moments are detected from message content. | Phase and moment count are injected into the LLM prompt each turn. The dashboard shows the current phase and total key moments. |
+| Curiosity | Per-user knowledge map across topics detected in messages. Topics range from 0 (unknown) to 1 (well-understood). | When knowledge on a topic is below 0.3 she asks a direct question. At 40% probability otherwise she surfaces curiosity as a prompt hint. Dashboard shows topics sorted by curiosity level. |
+| Internal conflicts | Five persistent desire-vs-fear tensions (closeness/independence, passion/comfort, stability/growth, etc.) with a swinging balance that is saved between sessions. | Every message triggers conflicts whose keywords match the topic. Balance swings over time. Conflicts with tension > 0 surface in the prompt and are visible on the dashboard with a tension bar. |
 | Persistence | Emotion, attachment, soul, somatic, unconscious, conflict, subconscious, circadian, and dream state under `data/`. | Restarting the runtime preserves the inner state instead of visually resetting it. |
 
 The public Pages site is a static explanation and dashboard export. The local WebUI is the live version: it streams the actual state from the running Python backend.
 
+
 ## Quick Start
 
 ```bash
@@ -273,6 +277,8 @@ The real WebUI streams local runtime state over Server-Sent Events and shows:
 - attachment, circadian rhythm, sleepiness, body memory, dreams, curiosity, and conflicts,
 - runtime health through local endpoints.
 
+The WebUI script is intentionally shipped as a single static file because the npm package has to run locally without a frontend build step. `npm run smoke` compiles the Python modules and checks the CLI; release validation also parses the embedded dashboard script so tab navigation, chat, settings, and thought rendering cannot be broken by a syntax error.
+
 GitHub Pages cannot run the Python/FastAPI backend, so the public page includes a static export of the actual WebUI with mocked state:
 
 ```text

package/brain/narrative.py

@@ -5,6 +5,7 @@ enabling natural references to shared history and phase awareness.
 """
 
 from datetime import datetime
+from pathlib import Path
 from typing import Dict, List, Optional
 import json
 import random

package/cli/check_webui_static.js

@@ -0,0 +1,29 @@
+#!/usr/bin/env node
+const fs = require("fs");
+const path = require("path");
+
+const root = path.resolve(__dirname, "..");
+const htmlPath = path.join(root, "webui", "static", "index.html");
+const manifestPath = path.join(root, "webui", "static", "manifest.json");
+
+const html = fs.readFileSync(htmlPath, "utf8");
+const scriptRegex = /<script\b[^>]*>([\s\S]*?)<\/script>/gi;
+let count = 0;
+for (const match of html.matchAll(scriptRegex)) {
+  count += 1;
+  try {
+    new Function(match[1]);
+  } catch (error) {
+    console.error(`Invalid inline script #${count} in ${path.relative(root, htmlPath)}:`);
+    console.error(error.message);
+    process.exit(1);
+  }
+}
+
+if (count === 0) {
+  console.error(`No inline scripts found in ${path.relative(root, htmlPath)}`);
+  process.exit(1);
+}
+
+JSON.parse(fs.readFileSync(manifestPath, "utf8"));
+console.log(`WebUI static check passed (${count} inline script parsed).`);

package/main.py

@@ -122,7 +122,7 @@ async def main() -> None:
             try:
                 from webui.bridge import init_bridge, init_soul_bridge, start_webui
 
-                init_bridge(ai.nervous)
+                init_bridge(ai.nervous, ai=ai)
                 if hasattr(ai, "_heart") and ai._heart and hasattr(ai._heart, "soul"):
                     init_soul_bridge(ai._heart.soul)
                 webui_task = asyncio.create_task(start_webui(host="127.0.0.1", port=webui_port))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "alive-ai",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "Local-first emotional AI runtime with memory, impulses, and a live dashboard.",
   "license": "MIT",
   "homepage": "https://vindepemarte.github.io/alive-ai/",
@@ -57,6 +57,6 @@
     "node": ">=18"
   },
   "scripts": {
-    "smoke": "node cli/index.js --help && python3 -m compileall -q alive_ai brain core heart input output skills webui"
+    "smoke": "node cli/index.js --help && node cli/check_webui_static.js && python3 -m compileall -q alive_ai brain core heart input output skills webui"
   }
 }

package/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "alive-ai-runtime"
-version = "0.1.11"
+version = "0.1.13"
 description = "Local-first emotional AI runtime with memory, impulses, and a live dashboard."
 readme = "README.md"
 requires-python = ">=3.11"

package/webui/app.py

@@ -9,8 +9,8 @@ from datetime import datetime
 from pathlib import Path
 from typing import Optional, Dict, List, Any
 from collections import deque
-from fastapi import FastAPI, Request
-from fastapi.responses import HTMLResponse, StreamingResponse, FileResponse
+from fastapi import FastAPI, Request, BackgroundTasks
+from fastapi.responses import HTMLResponse, StreamingResponse, FileResponse, JSONResponse
 from fastapi.staticfiles import StaticFiles
 from core.paths import data_dir, media_dir
 
@@ -128,6 +128,7 @@ alive_ai_state = {
     "last_user_message": None,
     "stats": _persistent_stats,
     "conversation": [],
+    "thinking": False,
     "recent_thoughts": [],
     "updated_at": datetime.now().isoformat(),
     "start_time": _start_time.isoformat(),
@@ -194,6 +195,15 @@ soul_history: deque = deque(maxlen=100)
 # Reference to Soul Orchestrator (set by bridge)
 _soul_orchestrator = None
 
+# Reference to AI Instance (set by bridge)
+_self_ref = None
+
+
+def set_self_ref(ai):
+    global _self_ref
+    _self_ref = ai
+
+
 # Connected clients for SSE
 clients = []
 
@@ -338,6 +348,13 @@ async def dashboard():
     return HTMLResponse(content=html_path.read_text())
 
 
+@app.get("/favicon.ico")
+async def favicon():
+    """Serve the dashboard icon for browsers that still request /favicon.ico."""
+    icon_path = Path(__file__).parent / "static" / "icon.svg"
+    return FileResponse(icon_path, media_type="image/svg+xml")
+
+
 @app.get("/events")
 async def sse_events(request: Request):
     """SSE endpoint for real-time updates"""
@@ -834,9 +851,24 @@ async def get_new_aliveness():
     try:
         from brain.narrative import get_narrative_engine
         ne = get_narrative_engine()
-        # Get owner's narrative
         from core.settings import get as settings_get
         owner_id = str(settings_get("TELEGRAM_OWNER_ID", ""))
+
+        # Fallback: when owner_id is empty (terminal mode), find the most active user
+        if not owner_id:
+            try:
+                users_path = data_dir() / "users"
+                if users_path.exists():
+                    candidates = [d.name for d in users_path.iterdir() if d.is_dir()]
+                    if candidates:
+                        # Pick the user with the most recent narrative file
+                        def _narr_mtime(uid):
+                            p = data_dir() / "users" / uid / "narrative.json"
+                            return p.stat().st_mtime if p.exists() else 0
+                        owner_id = max(candidates, key=_narr_mtime)
+            except Exception:
+                pass
+
         if owner_id:
             data = ne._get_data(owner_id)
             msg_count = data.get("message_count", 0)
@@ -895,6 +927,21 @@ async def get_new_aliveness():
         from brain.curiosity import get_curiosity_drive
         from core.settings import get as settings_get
         owner_id = str(settings_get("TELEGRAM_OWNER_ID", ""))
+
+        # Fallback: when owner_id is empty (terminal mode), find the most active user
+        if not owner_id:
+            try:
+                users_path = data_dir() / "users"
+                if users_path.exists():
+                    candidates = [d.name for d in users_path.iterdir() if d.is_dir()]
+                    if candidates:
+                        def _cur_mtime(uid):
+                            p = data_dir() / "users" / uid / "curiosity.json"
+                            return p.stat().st_mtime if p.exists() else 0
+                        owner_id = max(candidates, key=_cur_mtime)
+            except Exception:
+                pass
+
         if owner_id:
             cd = get_curiosity_drive(owner_id)
             topics = {t: round(v, 2) for t, v in cd.knowledge.items()} if hasattr(cd, 'knowledge') else {}
@@ -915,6 +962,69 @@ async def get_new_aliveness():
     return result
 
 
+@app.post("/api/chat")
+async def chat_endpoint(request: Request, background_tasks: BackgroundTasks):
+    data = await request.json()
+    text = data.get("text", "").strip()
+    if not text or not _self_ref:
+        return JSONResponse({"status": "error", "message": "No text or AI not ready"}, 400)
+    # Add user message immediately to conversation
+    add_conversation("user", text)
+    update_state({})
+    # Fire message handler in background
+    async def _send():
+        from core.message_handler import handle_message
+        await handle_message(_self_ref, {
+            "user_id": "webui",
+            "text": text,
+            "chat_id": "webui",
+            "source": "webui"
+        })
+    background_tasks.add_task(_send)
+    return JSONResponse({"status": "sent"})
+
+
+@app.get("/api/settings")
+async def get_settings():
+    import json
+    from pathlib import Path
+    config_dir = Path(os.environ.get("ALIVE_AI_ROOT", ".")) / "config"
+    result = {}
+    for fname in ["settings.json", "self.json", "directives.json"]:
+        p = config_dir / fname
+        if p.exists():
+            try:
+                result[fname] = {"type": "json", "content": json.loads(p.read_text())}
+            except Exception:
+                result[fname] = {"type": "json", "content": {}}
+    p = config_dir / "instructions.md"
+    if p.exists():
+        result["instructions.md"] = {"type": "markdown", "content": p.read_text()}
+    return result
+
+
+@app.post("/api/settings")
+async def save_settings(request: Request):
+    import json
+    from pathlib import Path
+    data = await request.json()
+    fname = data.get("file", "")
+    allowed = {"settings.json", "self.json", "directives.json", "instructions.md"}
+    if fname not in allowed:
+        return JSONResponse({"status": "error", "message": "Invalid file"}, 400)
+    config_dir = Path(os.environ.get("ALIVE_AI_ROOT", ".")) / "config"
+    p = config_dir / fname
+    content = data.get("content")
+    try:
+        if fname.endswith(".json"):
+            p.write_text(json.dumps(content, indent=2, ensure_ascii=False))
+        else:
+            p.write_text(content)
+        return {"status": "saved"}
+    except Exception as e:
+        return JSONResponse({"status": "error", "message": str(e)}, 500)
+
+
 # Mount static files
 static_path = Path(__file__).parent / "static"
 if static_path.exists():

package/webui/bridge.py

@@ -14,8 +14,11 @@ from .app import (
 _webui_server = None
 
 
-def init_bridge(nervous):
+def init_bridge(nervous, ai=None):
     """Connect nervous system events to webui updates"""
+    if ai is not None:
+        from .app import set_self_ref
+        set_self_ref(ai)
 
     async def on_emotion(data):
         """Update emotion state in dashboard"""
@@ -178,6 +181,16 @@ def init_bridge(nervous):
         except Exception as e:
             print(f"[WebUI] Error updating inconsistency state: {e}")
 
+    async def on_thinking_start(data):
+        """Set thinking state to True"""
+        alive_ai_state["thinking"] = True
+        update_state({})
+
+    async def on_thinking_done(data):
+        """Set thinking state to False"""
+        alive_ai_state["thinking"] = False
+        update_state({})
+
     # Register event listeners
     nervous.on("emotion_update", on_emotion)
     nervous.on("send_text", on_message_sent)
@@ -187,6 +200,8 @@ def init_bridge(nervous):
     nervous.on("subconscious_impulse", on_subconscious)
     nervous.on("subconscious_thought", on_subconscious_thought)
     nervous.on("soul_tick", on_soul_tick_event)
+    nervous.on("thinking_start", on_thinking_start)
+    nervous.on("thinking_done", on_thinking_done)
 
     # Register aliveness event listeners
     nervous.on("interoceptive_update", on_interoceptive_update)

package/webui/static/icon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+  <rect width="128" height="128" rx="28" fill="#10121f"/>
+  <circle cx="64" cy="64" r="42" fill="none" stroke="#00d4ff" stroke-width="8"/>
+  <path d="M39 72c9 14 41 14 50 0" fill="none" stroke="#ff4d9d" stroke-width="8" stroke-linecap="round"/>
+  <circle cx="49" cy="53" r="7" fill="#f7f7fb"/>
+  <circle cx="79" cy="53" r="7" fill="#f7f7fb"/>
+</svg>

package/webui/static/index.html

@@ -4,9 +4,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <meta name="theme-color" content="#0f0f1a">
+    <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <title>Alive-AI</title>
+    <link rel="icon" href="/static/icon.svg" type="image/svg+xml">
     <link rel="manifest" href="/static/manifest.json">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <style>
@@ -1064,6 +1066,277 @@
             0% { background-position: 200% 0; }
             100% { background-position: -200% 0; }
         }
+
+        /* Multi-Page Dashboard & Tab Switching */
+        .main.chat-active {
+            overflow-y: hidden;
+            padding-bottom: 0;
+            display: flex;
+            flex-direction: column;
+            height: calc(100vh - 75px - var(--safe-top) - var(--safe-bottom) - 75px);
+        }
+        
+        .page-section {
+            width: 100%;
+        }
+
+        /* Chat Page Styles */
+        #page-chat {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            position: relative;
+        }
+
+        .chat-messages {
+            flex: 1;
+            overflow-y: auto;
+            padding: 10px 0;
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            scroll-behavior: smooth;
+        }
+
+        /* Scrollbar styling for chat */
+        .chat-messages::-webkit-scrollbar {
+            width: 6px;
+        }
+        .chat-messages::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        .chat-messages::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 3px;
+        }
+
+        .chat-msg-row {
+            display: flex;
+            width: 100%;
+            margin-bottom: 4px;
+        }
+        .chat-msg-row.user {
+            justify-content: flex-end;
+        }
+        .chat-msg-row.alive-ai {
+            justify-content: flex-start;
+        }
+
+        .chat-bubble {
+            max-width: 80%;
+            padding: 12px 16px;
+            font-size: 0.95rem;
+            line-height: 1.45;
+            position: relative;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+            transition: all 0.2s ease;
+        }
+
+        .chat-msg-row.user .chat-bubble {
+            background: linear-gradient(135deg, var(--accent-pink) 0%, #a55eea 100%);
+            color: #fff;
+            border-radius: 20px 20px 4px 20px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+
+        .chat-msg-row.alive-ai .chat-bubble {
+            background: rgba(255, 255, 255, 0.04);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            color: var(--text-primary);
+            border-radius: 20px 20px 20px 4px;
+        }
+
+        .chat-bubble-time {
+            font-size: 0.7rem;
+            color: rgba(255, 255, 255, 0.5);
+            margin-top: 4px;
+            text-align: right;
+            display: block;
+        }
+        .chat-msg-row.alive-ai .chat-bubble-time {
+            color: var(--text-muted);
+        }
+
+        /* Typing Dots Animation */
+        .typing-indicator {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
+            padding: 6px 12px;
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            border-radius: 12px;
+            margin-top: 4px;
+            color: var(--accent-pink);
+            font-size: 0.85rem;
+        }
+
+        .typing-dots {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        .typing-dots span {
+            width: 6px;
+            height: 6px;
+            background-color: var(--accent-pink);
+            border-radius: 50%;
+            display: inline-block;
+            animation: bounce 1.4s infinite ease-in-out both;
+        }
+
+        .typing-dots span:nth-child(1) { animation-delay: -0.32s; }
+        .typing-dots span:nth-child(2) { animation-delay: -0.16s; }
+
+        @keyframes bounce {
+            0%, 80%, 100% { transform: scale(0); }
+            40% { transform: scale(1.0); }
+        }
+
+        /* Settings CSS */
+        .settings-card {
+            margin-bottom: 20px;
+        }
+        .settings-header-btn-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+            padding-bottom: 10px;
+            margin-bottom: 12px;
+        }
+        .settings-file-title {
+            font-size: 1.1rem;
+            font-weight: 700;
+            color: var(--accent-pink);
+        }
+        .settings-grid {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+        .settings-field-row {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+        .settings-field-label {
+            font-size: 0.8rem;
+            font-weight: 600;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        .settings-input {
+            width: 100%;
+            background: rgba(0, 0, 0, 0.2);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            border-radius: 8px;
+            padding: 10px 12px;
+            color: #fff;
+            font-family: inherit;
+            font-size: 0.9rem;
+            outline: none;
+            transition: all 0.2s;
+        }
+        .settings-input:focus {
+            border-color: var(--accent-pink);
+            box-shadow: 0 0 8px var(--glow-pink);
+        }
+        .settings-checkbox-container {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            cursor: pointer;
+            padding: 4px 0;
+        }
+        .settings-checkbox-container input {
+            cursor: pointer;
+            width: 18px;
+            height: 18px;
+            accent-color: var(--accent-pink);
+        }
+        .settings-checkbox-label {
+            font-size: 0.9rem;
+            font-weight: 500;
+            color: var(--text-primary);
+        }
+        .settings-textarea {
+            width: 100%;
+            background: rgba(0, 0, 0, 0.2);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            border-radius: 8px;
+            padding: 10px 12px;
+            color: #fff;
+            font-family: 'Courier New', Courier, monospace;
+            font-size: 0.85rem;
+            line-height: 1.4;
+            min-height: 120px;
+            resize: vertical;
+            outline: none;
+            transition: all 0.2s;
+        }
+        .settings-textarea:focus {
+            border-color: var(--accent-pink);
+            box-shadow: 0 0 8px var(--glow-pink);
+        }
+        .btn-action {
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            color: #fff;
+            padding: 6px 12px;
+            border-radius: 8px;
+            font-size: 0.85rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        .btn-action:hover {
+            background: var(--accent-pink);
+            border-color: var(--accent-pink);
+            box-shadow: 0 0 10px var(--glow-pink);
+        }
+        .btn-save-all {
+            background: linear-gradient(135deg, var(--accent-pink) 0%, #a55eea 100%);
+            border: none;
+            color: #fff;
+            padding: 8px 16px;
+            border-radius: 8px;
+            font-size: 0.85rem;
+            font-weight: 700;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        .btn-save-all:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 0 15px var(--glow-pink);
+        }
+
+        /* Toast notifications */
+        .toast-container {
+            position: fixed;
+            bottom: 80px;
+            left: 50%;
+            transform: translateX(-50%) translateY(100px);
+            background: rgba(26, 26, 46, 0.95);
+            border: 1px solid var(--accent-pink);
+            box-shadow: 0 4px 20px var(--glow-pink);
+            color: #fff;
+            padding: 12px 24px;
+            border-radius: 30px;
+            font-size: 0.9rem;
+            font-weight: 600;
+            z-index: 2000;
+            transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            pointer-events: none;
+        }
+        .toast-container.show {
+            transform: translateX(-50%) translateY(0);
+        }
     </style>
 </head>
 <body>
@@ -1092,7 +1365,8 @@
         </header>
 
         <main class="main">
-            <!-- Stats Row -->
+            <div id="page-home" class="page-section">
+                <!-- Stats Row -->
             <div class="stats-row">
                 <div class="stat-card">
                     <div class="stat-value" id="stat-messages">0</div>
@@ -1578,8 +1852,34 @@
                     <span class="tendency-badge" id="tendency-badge">neutral</span>
                 </div>
             </div>
+            </div> <!-- #page-home -->
+
+            <!-- CHAT PAGE -->
+            <div id="page-chat" class="page-section" style="display:none; flex-direction:column; height:100%;">
+                <div id="chat-messages" class="chat-messages"></div>
+                <div id="chat-typing" style="display:none; padding:8px 0; color:var(--accent-pink); font-size:0.85rem;">
+                    <div class="typing-indicator">
+                        <span>she is thinking</span>
+                        <div class="typing-dots">
+                            <span></span><span></span><span></span>
+                        </div>
+                    </div>
+                </div>
+                <div class="chat-input-container" style="display:flex; gap:10px; padding:10px 0; background:var(--bg-primary); border-top:1px solid rgba(255,255,255,0.05); align-items: flex-end;">
+                    <textarea id="chat-input" rows="1" placeholder="Type a message..." style="flex:1; background:var(--bg-card); border:1px solid rgba(255,255,255,0.1); border-radius:20px; padding:10px 16px; color:#fff; font-size:0.9rem; resize:none; font-family:inherit; outline:none; transition:border-color 0.2s;" oninput="this.style.height='auto';this.style.height=this.scrollHeight+'px';"></textarea>
+                    <button id="chat-send" class="btn-send" style="background:linear-gradient(135deg,var(--accent-pink),#a55eea); border:none; border-radius:50%; width:42px; height:42px; color:#fff; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform 0.2s, opacity 0.2s; outline:none;">↑</button>
+                </div>
+            </div>
+
+            <!-- SETTINGS PAGE -->
+            <div id="page-settings" class="page-section" style="display:none; flex-direction:column; gap:16px;">
+                <div id="settings-content">Loading settings...</div>
+            </div>
         </main>
 
+        <!-- Toast Notification Container -->
+        <div id="toast-notification" class="toast-container">Settings saved successfully</div>
+
         <nav class="bottom-nav">
             <div class="nav-item active">
                 <span class="nav-icon">🏠</span>
@@ -1603,6 +1903,291 @@
             'angry': '😤', 'neutral': '😌', 'calm': '😌', 'loving': '💕'
         };
 
+        const pages = {
+            home: 'page-home',
+            chat: 'page-chat',
+            settings: 'page-settings'
+        };
+        let activePage = 'home';
+        let conversationCache = [];
+        let isSettingsLoaded = false;
+        let isSendingMessage = false;
+
+        // Tab switching
+        document.addEventListener('DOMContentLoaded', () => {
+            const navItems = document.querySelectorAll('.nav-item');
+            const mainEl = document.querySelector('.main');
+            
+            navItems.forEach((el, index) => {
+                el.addEventListener('click', () => {
+                    navItems.forEach(item => item.classList.remove('active'));
+                    el.classList.add('active');
+                    
+                    // Hide all pages
+                    document.getElementById('page-home').style.display = 'none';
+                    document.getElementById('page-chat').style.display = 'none';
+                    document.getElementById('page-settings').style.display = 'none';
+                    
+                    // Show current page
+                    const pageKeys = Object.keys(pages);
+                    activePage = pageKeys[index];
+                    const activePageId = pages[activePage];
+                    const activeEl = document.getElementById(activePageId);
+                    
+                    if (activePage === 'chat') {
+                        activeEl.style.display = 'flex';
+                        mainEl.classList.add('chat-active');
+                        scrollChatToBottom();
+                    } else {
+                        activeEl.style.display = 'block';
+                        mainEl.classList.remove('chat-active');
+                    }
+                    
+                    if (activePage === 'settings') {
+                        loadSettings();
+                    }
+                });
+            });
+
+            // Chat input handlers
+            const sendBtn = document.getElementById('chat-send');
+            const inputEl = document.getElementById('chat-input');
+            if (sendBtn) {
+                sendBtn.addEventListener('click', sendMessage);
+            }
+            if (inputEl) {
+                inputEl.addEventListener('keydown', (e) => {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                        e.preventDefault();
+                        sendMessage();
+                    }
+                });
+            }
+        });
+
+        // Toast notifications
+        function showToast(text, duration = 3000) {
+            const toast = document.getElementById('toast-notification');
+            toast.textContent = text;
+            toast.classList.add('show');
+            setTimeout(() => {
+                toast.classList.remove('show');
+            }, duration);
+        }
+
+        // Chat scroll
+        function scrollChatToBottom() {
+            const chatMessages = document.getElementById('chat-messages');
+            if (chatMessages) {
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+            }
+        }
+
+        // Chat rendering
+        function updateChatUI(conversation, isThinking) {
+            const messagesContainer = document.getElementById('chat-messages');
+            if (!messagesContainer) return;
+            
+            // Check if conversation changed to avoid redrawing if same
+            const cacheStr = JSON.stringify(conversation);
+            const prevStr = JSON.stringify(conversationCache);
+            
+            if (cacheStr !== prevStr) {
+                conversationCache = conversation;
+                
+                if (!conversation || conversation.length === 0) {
+                    messagesContainer.innerHTML = '<div style="text-align:center;color:var(--text-muted);margin-top:40px;font-size:0.9rem;">No messages yet. Say hi!</div>';
+                } else {
+                    messagesContainer.innerHTML = conversation.map(msg => {
+                        const isUser = msg.role === 'user';
+                        const time = msg.time || '';
+                        return `<div class="chat-msg-row ${isUser ? 'user' : 'alive-ai'}">
+                            <div class="chat-bubble">
+                                <div>${escapeHtml(msg.content)}</div>
+                                <span class="chat-bubble-time">${time}</span>
+                            </div>
+                        </div>`;
+                    }).join('');
+                }
+                scrollChatToBottom();
+            }
+            
+            // Show/hide thinking indicator
+            const typingEl = document.getElementById('chat-typing');
+            if (typingEl) {
+                typingEl.style.display = isThinking ? 'block' : 'none';
+                if (isThinking) {
+                    scrollChatToBottom();
+                }
+            }
+        }
+
+        // Send message via API
+        async function sendMessage() {
+            const inputEl = document.getElementById('chat-input');
+            const btnEl = document.getElementById('chat-send');
+            if (!inputEl || !btnEl || isSendingMessage) return;
+            
+            const text = inputEl.value.trim();
+            if (!text) return;
+            
+            isSendingMessage = true;
+            inputEl.disabled = true;
+            btnEl.style.opacity = '0.5';
+            
+            try {
+                const response = await fetch('/api/chat', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ text })
+                });
+                const resData = await response.json();
+                if (response.ok && resData.status === 'sent') {
+                    inputEl.value = '';
+                    inputEl.style.height = 'auto'; // reset textarea height
+                } else {
+                    showToast('Failed to send: ' + (resData.message || 'Unknown error'));
+                }
+            } catch (err) {
+                console.error('Error sending message:', err);
+                showToast('Failed to send message');
+            } finally {
+                isSendingMessage = false;
+                inputEl.disabled = false;
+                btnEl.style.opacity = '1';
+                inputEl.focus();
+            }
+        }
+
+        // Settings load
+        async function loadSettings() {
+            const container = document.getElementById('settings-content');
+            if (!container) return;
+            
+            try {
+                container.innerHTML = '<div style="text-align:center;color:var(--text-secondary);padding:20px;">Loading settings...</div>';
+                const response = await fetch('/api/settings');
+                if (!response.ok) throw new Error('HTTP ' + response.status);
+                const settingsData = await response.json();
+                renderSettings(settingsData);
+                isSettingsLoaded = true;
+            } catch (err) {
+                console.error('Error loading settings:', err);
+                container.innerHTML = `<div style="text-align:center;color:#ff4d4d;padding:20px;">Failed to load settings: ${escapeHtml(err.message)}</div>`;
+            }
+        }
+
+        // Settings rendering
+        function renderSettings(settingsData) {
+            const container = document.getElementById('settings-content');
+            if (!container) return;
+            
+            let html = '';
+            Object.entries(settingsData).forEach(([filename, fileData]) => {
+                let contentStr = '';
+                if (fileData.type === 'json') {
+                    contentStr = JSON.stringify(fileData.content, null, 2);
+                } else {
+                    contentStr = fileData.content;
+                }
+                
+                html += `
+                <div class="section settings-card">
+                    <div class="settings-header-btn-row">
+                        <div class="settings-file-title">⚙️ ${filename}</div>
+                        <button class="btn-save btn-action" data-file="${filename}" onclick="saveFileSettings('${filename}')">Save</button>
+                    </div>
+                    <div class="settings-grid">
+                        <textarea class="settings-textarea" data-file="${filename}" oninput="validateJSONInput(this, '${filename}')" spellcheck="false">${escapeHtml(contentStr)}</textarea>
+                    </div>
+                </div>
+                `;
+            });
+            container.innerHTML = html;
+        }
+
+        // Real-time JSON validation
+        function validateJSONInput(textarea, filename) {
+            const btn = document.querySelector(`.btn-save[data-file="${filename}"]`);
+            let errorEl = textarea.parentNode.querySelector('.json-error-msg');
+            
+            if (!errorEl) {
+                errorEl = document.createElement('div');
+                errorEl.className = 'json-error-msg';
+                errorEl.style.color = '#ff6b9d';
+                errorEl.style.fontSize = '0.8rem';
+                errorEl.style.marginTop = '4px';
+                textarea.parentNode.appendChild(errorEl);
+            }
+            
+            if (!filename.endsWith('.json')) {
+                errorEl.textContent = '';
+                return true;
+            }
+            
+            try {
+                JSON.parse(textarea.value);
+                textarea.style.borderColor = 'rgba(255, 255, 255, 0.1)';
+                errorEl.textContent = '';
+                if (btn) btn.disabled = false;
+                return true;
+            } catch (e) {
+                textarea.style.borderColor = '#ff6b9d';
+                errorEl.textContent = 'Invalid JSON: ' + e.message;
+                if (btn) btn.disabled = true;
+                return false;
+            }
+        }
+
+        // Settings saving
+        async function saveFileSettings(filename) {
+            const textarea = document.querySelector(`.settings-textarea[data-file="${filename}"]`);
+            if (!textarea) return;
+            
+            let parsedContent;
+            if (filename.endsWith('.json')) {
+                try {
+                    parsedContent = JSON.parse(textarea.value);
+                } catch (e) {
+                    showToast(`Invalid JSON in ${filename}: ${e.message}`);
+                    return;
+                }
+            } else {
+                parsedContent = textarea.value;
+            }
+            
+            const btn = document.querySelector(`.btn-save[data-file="${filename}"]`);
+            if (btn) {
+                btn.disabled = true;
+                btn.textContent = 'Saving...';
+            }
+            
+            try {
+                const response = await fetch('/api/settings', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        file: filename,
+                        content: parsedContent
+                    })
+                });
+                const resData = await response.json();
+                if (response.ok && resData.status === 'saved') {
+                    showToast(`${filename} saved successfully!`);
+                } else {
+                    showToast(`Failed to save: ${resData.message || 'Unknown error'}`);
+                }
+            } catch (err) {
+                console.error('Error saving settings:', err);
+                showToast(`Error saving ${filename}`);
+            } finally {
+                if (btn) {
+                    btn.disabled = false;
+                    btn.textContent = 'Save';
+                }
+            }
+        }
+
         let eventSource;
         let startTime = null;  // Will be set from server's start_time
         const banner = document.getElementById('connection-banner');
@@ -1628,6 +2213,9 @@
         }
 
         function updateUI(data) {
+            // Update Chat UI
+            updateChatUI(data.conversation || [], !!data.thinking);
+
             // Mood
             const mood = data.mood || 'neutral';
             document.getElementById('mood-emoji').textContent = moodEmojis[mood] || '😌';
@@ -1809,17 +2397,20 @@
                     const name = c.name || c.id || 'Unknown';
                     const desire = c.desire || c.side_a || '';
                     const fear = c.fear || c.side_b || '';
-                    const tension = Math.round((c.tension_level || c.intensity || 0) * 100);
+                    // Support both 'tension' (inconsistency API) and 'tension_level' (soul API)
+                    const rawTension = c.tension_level !== undefined ? c.tension_level : (c.tension !== undefined ? c.tension : c.intensity || 0);
+                    const tension = Math.round(rawTension * 100);
 
                     return `
                     <div class="conflict-item">
                         <div class="conflict-name">${escapeHtml(name.replace(/_/g, ' '))}</div>
                         <div class="conflict-detail">${escapeHtml(desire)} <span style="color:var(--text-muted)">vs</span> ${escapeHtml(fear)}</div>
                         <div class="conflict-tension" style="margin-top:4px;height:3px;background:rgba(255,255,255,0.1);border-radius:2px;overflow:hidden;">
-                            <div style="width:${tension}%;height:100%;background:linear-gradient(90deg,#e74c3c,#ff9800);border-radius:2px;"></div>
+                            <div style="width:${tension}%;height:100%;background:linear-gradient(90deg,#e74c3c,#ff9800);border-radius:2px;transition:width 0.6s ease;"></div>
                         </div>
                     </div>
                 `}).join('');
+
             } else if (conflictsEl) {
                 conflictsEl.innerHTML = '<div class="conflict-empty">No active internal conflicts</div>';
             }

package/webui/static/manifest.json

@@ -0,0 +1,18 @@
+{
+  "name": "Alive-AI WebUI",
+  "short_name": "Alive-AI",
+  "description": "Local dashboard for Alive-AI runtime state, chat, thoughts, emotions, and settings.",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#10121f",
+  "theme_color": "#00d4ff",
+  "icons": [
+    {
+      "src": "/static/icon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    }
+  ]
+}