ltcai 2.2.0 → 2.2.1

package/README.md

@@ -1,84 +1,82 @@
-# Lattice AI
+<div align="center">
+  <img src="docs/images/logo.svg" alt="Lattice AI" width="120" />
 
-Lattice AI is an **AI Knowledge OS** for personal and organization workspaces.
-It is not a simple chat app, local LLM launcher, or model manager.
+  # Lattice AI
 
-Lattice AI turns files, documents, images, screenshots, conversations,
-decisions, notes, work history, and generated artifacts into knowledge. That
-knowledge is linked into a Knowledge Graph, and AI works on top of the graph to
-advise, analyze, generate documents, and automate work.
+  **A local-first AI workspace** — Plan → Execute → Review with multiple LLMs,
+  on top of a durable Knowledge Graph.
 
-The product rule for v2.2.0 is direct:
-
-> Do not control the user in the name of protection. Explain clearly, disclose
-> sources and risks, then let the user decide.
-
-## Current release
-
-**2.2.0 — Multimodal-First Knowledge OS Release.** Lattice AI now centers the
-product on a multimodal Knowledge Graph, Gemma-4-first recommendations, source
-disclosure, and equal feature access across basic and advanced modes. Admin mode
-is the only mode with additional authority.
+  Apple Silicon (MLX) local model management · Personal & Organization workspaces ·
+  Multi-agent workflows · SSO for teams
+</div>
 
 ---
 
-## What Lattice AI Does
-
-- Accepts PDFs, Word files, spreadsheets, slide decks, images, screenshots,
-  notes, code, web content, conversations, and work logs without asking the user
-  to pre-convert them.
-- Extracts entities, relationships, evidence, decisions, and artifacts into the
-  Knowledge Graph.
-- Uses AI models as replaceable workers on top of the graph.
-- Recommends current-generation multimodal models based on CPU, GPU, RAM,
-  storage, OS, and observed usage.
-- Shows every model's source facts before use:
-  1. 제작 국가
-  2. 제작 회사
-  3. 실행 방식
-  4. 인터넷 사용 여부
-  5. 모델명
-- Keeps text-only local model recommendations out of the product path.
-
-## Core Principles
-
-- Users should not work for AI. AI should work for users.
-- Do not hide features, sources, limitations, or risks.
-- Basic and advanced modes expose the same capabilities.
-- Basic mode explains in plain language.
-- Advanced mode shows deeper technical reasoning.
-- Admin mode is reserved for user management, permissions, audit logs,
-  organization policy, security policy, model approval, and Private VPC.
-- Knowledge Graph durability matters more than any single model.
-- Old model generations are removed when a newer generation in the same family
-  is available.
-
-## Multimodal Model Policy
-
-Lattice AI v2.2.0 removes the old text-only recommendation path.
-
-Current local recommendations focus on:
-
-| Family | Default role | Example current recommendation |
-| --- | --- | --- |
-| Gemma 4 | Default Google multimodal family | `mlx-community/gemma-4-12b-it-4bit` |
-| Gemma 4 large | Higher-quality local multimodal work | `mlx-community/gemma-4-31b-it-4bit` |
-| Qwen3-VL | Smaller and balanced multimodal options | `mlx-community/Qwen3-VL-4B-Instruct-4bit` |
-| Llama 4 | Meta multimodal option | `mlx-community/Llama-4-Scout-17B-16E-Instruct-4bit` |
-
-Removed from current recommendation catalogs:
+Lattice AI turns your files, documents, images, screenshots, conversations,
+decisions, notes, and work history into linked knowledge. AI then works on top of
+that Knowledge Graph to advise, analyze, generate documents, and automate work.
 
-- `mlx-lm` as a local text-only execution path
-- Gemma 2 and Gemma 3 recommendations
-- Qwen2.5-VL recommendations
-- SmolLM, Phi, Mistral, DeepSeek, GPT-OSS, and Llama 3.x local recommendation
-  entries
-- text-only fallback logic for low-spec machines
+It is built around a simple product rule:
 
-Low-spec machines are handled with smaller or quantized multimodal models,
-not older text-only models.
+> Do not control the user in the name of protection. Explain clearly, disclose
+> sources and risks, then let the user decide.
 
-## Knowledge Graph Flow
+## What Lattice AI is
+
+Lattice AI is four things working together, not an operating system and not a
+simple chat front-end:
+
+- **Local-first AI Workspace** — runs on your machine first; your data and graph
+  stay local by default.
+- **AI Pipeline Platform** — a Plan → Execute → Review loop that can route across
+  multiple LLMs for each stage.
+- **Knowledge Graph Platform** — multimodal inputs become entities,
+  relationships, evidence, and artifacts that outlive any single model.
+- **Workspace Platform** — Personal and Organization workspaces, role-based
+  access, and SSO for teams.
+
+## Highlights
+
+- **Multimodal ingestion** — accepts PDFs, Word, spreadsheets, slide decks,
+  images, screenshots, notes, code, web content, conversations, and work logs
+  without asking you to pre-convert them.
+- **Knowledge Graph core** — extracts entities, relationships, evidence,
+  decisions, and artifacts so your work memory survives model changes.
+- **Multi-agent workflow** — agents hand off work with structured context
+  packets, review/retry loops, and replayable timelines.
+- **Local model management** — MLX-VLM on Apple Silicon, with current-generation
+  multimodal model recommendations based on your CPU, GPU, RAM, storage, and OS.
+- **Source disclosure** — every recommended model shows its facts in plain
+  language before use: maker country, maker company, run mode (local/cloud),
+  internet requirement, and model name.
+- **Basic / Advanced / Admin modes** — the same features everywhere; the modes
+  differ only in how much is explained. Admin mode adds authority
+  (user management, permissions, audit logs, org/security policy, model approval).
+
+## v2.2.1 — Frontend & UX overhaul
+
+v2.2.1 is a UX-focused release. No features were removed; the interface was
+re-laid out and re-themed.
+
+- **Responsive, mobile-first UI** — phone, tablet, laptop, desktop, ultrawide,
+  and 4K. Content is re-laid out for each size, never hidden.
+- **Light / Dark themes via design tokens** — a single source of truth in
+  [`static/css/tokens.css`](static/css/tokens.css). `:root` holds light values,
+  `[data-lt-theme="dark"]` holds dark values. The theme toggle, OS preference
+  detection, and persistence live in
+  [`static/scripts/ux.js`](static/scripts/ux.js).
+- **Accessibility** — 44px touch targets, `:focus-visible` rings, a
+  keyboard-safe chat composer (uses `visualViewport` insets), iOS no-zoom inputs,
+  and reduced-motion support.
+- **Knowledge Graph UX** — responsive canvas that re-fits on resize, zoom
+  buttons, fullscreen, minimap, relationship filtering, a mobile graph↔card
+  view, and a theme-aware palette.
+- **Admin UX** — wide tables reflow to cards on mobile, with larger touch targets
+  and full dark/light support.
+- **File UX** — drag & drop and screenshot paste to attach. Model cards explain
+  country, company, run mode, and internet use in plain language.
+
+## Knowledge Graph flow
 
 ```text
 files / documents / images / conversations / work history
@@ -90,122 +88,118 @@ files / documents / images / conversations / work history
   -> advice / analysis / document generation / automation
 ```
 
-The graph preserves the user's work memory even when the model changes.
+The graph preserves your work memory even when the model changes.
 
-## Quick Start
+## Local model policy
 
-```bash
-npm install
-npm run dev
-```
+Lattice AI recommends current-generation **multimodal** models for local use and
+keeps text-only recommendation paths out of the product:
 
-Then open:
+| Family | Default role | Example current recommendation |
+| --- | --- | --- |
+| Gemma 4 | Default Google multimodal family | `mlx-community/gemma-4-12b-it-4bit` |
+| Gemma 4 large | Higher-quality local multimodal work | `mlx-community/gemma-4-31b-it-4bit` |
+| Qwen3-VL | Smaller, balanced multimodal options | `mlx-community/Qwen3-VL-4B-Instruct-4bit` |
+| Llama 4 | Meta multimodal option | `mlx-community/Llama-4-Scout-17B-16E-Instruct-4bit` |
 
-```text
-http://127.0.0.1:4825
-```
+Low-spec machines use smaller or quantized multimodal models rather than older
+text-only models. See [MODEL_POLICY.md](MODEL_POLICY.md) for the full policy.
 
-Useful commands:
+## Requirements
 
-```bash
-npm test
-npm run check:python
-npm run build
-```
+- Python **3.11+**
+- macOS, Windows, or Linux for the workspace server
+- Apple Silicon for local MLX-VLM model execution (optional; cloud models work
+  without it)
 
-VS Code extension:
+## Quick start
 
-```bash
-cd vscode-extension
-npm install
-npm run build
-npm run package:vsix
-```
-
-## Python Package
+Lattice AI is a Python + FastAPI app. The CLI entry point is `ltcai_cli.py`.
 
 ```bash
-python3 -m build
+npm install        # installs the npm package and dev tooling
+npm run dev        # runs: python3 ltcai_cli.py --reload
 ```
 
-Expected v2.2.0 Python artifacts:
+Then open:
 
 ```text
-dist/ltcai-2.2.0-py3-none-any.whl
-dist/ltcai-2.2.0.tar.gz
+http://127.0.0.1:4825
 ```
 
-## VS Code Package
+Prefer Python directly?
 
 ```bash
-cd vscode-extension
-npm run build
-npm run package:vsix
-```
-
-Expected v2.2.0 VSIX artifact:
-
-```text
-dist/ltcai-2.2.0.vsix
+python3 ltcai_cli.py
+# host/port: --host 127.0.0.1 --port 4825
 ```
 
-## npm Package
+For local model execution on Apple Silicon, install the optional extra:
 
 ```bash
-npm pack
+pip install "ltcai[local]"   # adds mlx-vlm
 ```
 
-Expected v2.2.0 npm artifact:
+Useful commands:
 
-```text
-ltcai-2.2.0.tgz
+```bash
+npm test                # python3 -m pytest tests/ -v
+npm run check:python    # py_compile across core modules
+npm run build           # python3 -m build
 ```
 
-## Manual Publishing
-
-Publishing is intentionally manual. Do not publish with globs.
+## VS Code extension
 
-PyPI:
+A companion VS Code extension lives in [`vscode-extension/`](vscode-extension).
 
 ```bash
-python3 -m twine upload dist/ltcai-2.2.0-py3-none-any.whl dist/ltcai-2.2.0.tar.gz
+cd vscode-extension
+npm install
+npm run build
+npm run package:vsix
 ```
 
-VS Code Marketplace:
+## Build & packaging
 
-```bash
-npx vsce publish --packagePath dist/ltcai-2.2.0.vsix
-```
-
-Open VSX:
+Lattice AI ships as a Python package (`ltcai`), an npm package (`ltcai`), and a
+VS Code extension.
 
 ```bash
-npx ovsx publish dist/ltcai-2.2.0.vsix
+python3 -m build        # Python wheel + sdist
+npm pack                # npm tarball
 ```
 
-npm:
-
-```bash
-npm publish --access public
-```
+Publishing is intentionally manual — no glob uploads. See [RELEASE.md](RELEASE.md)
+for the exact, version-scoped publish steps for PyPI, npm, the VS Code
+Marketplace, and Open VSX.
 
 ## Documentation
 
-- [ARCHITECTURE.md](ARCHITECTURE.md)
-- [PROJECT_PRINCIPLES.md](PROJECT_PRINCIPLES.md)
-- [AI_PHILOSOPHY.md](AI_PHILOSOPHY.md)
-- [MODEL_POLICY.md](MODEL_POLICY.md)
-- [KNOWLEDGE_GRAPH.md](KNOWLEDGE_GRAPH.md)
-- [RELEASE_NOTES.md](RELEASE_NOTES.md)
-- [docs/CHANGELOG.md](docs/CHANGELOG.md)
-
-## Release History
+- [ARCHITECTURE.md](ARCHITECTURE.md) — system shape and runtime policy
+- [docs/architecture.md](docs/architecture.md) — full architecture reference
+- [PROJECT_PRINCIPLES.md](PROJECT_PRINCIPLES.md) — product principles
+- [AI_PHILOSOPHY.md](AI_PHILOSOPHY.md) — how AI is used here
+- [MODEL_POLICY.md](MODEL_POLICY.md) — local model recommendation policy
+- [KNOWLEDGE_GRAPH.md](KNOWLEDGE_GRAPH.md) — graph model and behavior
+- [docs/MULTI_AGENT_RUNTIME.md](docs/MULTI_AGENT_RUNTIME.md) — multi-agent runtime
+- [docs/WORKFLOW_DESIGNER.md](docs/WORKFLOW_DESIGNER.md) — workflow designer
+- [docs/REALTIME_COLLABORATION.md](docs/REALTIME_COLLABORATION.md) — realtime collaboration
+- [docs/ENTERPRISE.md](docs/ENTERPRISE.md) — Organization workspaces & SSO (Okta / Microsoft Entra ID)
+- [docs/security-model.md](docs/security-model.md) — security model
+- [docs/PLUGIN_SDK.md](docs/PLUGIN_SDK.md) — plugin SDK
+- [RELEASE_NOTES.md](RELEASE_NOTES.md) · [docs/CHANGELOG.md](docs/CHANGELOG.md)
+
+## Release history
 
 | Version | Theme |
 | --- | --- |
-| **2.2.0** | Multimodal-first Knowledge OS, source disclosure, Gemma-4 recommendation policy |
-| 2.1.0 | Agent Platform Maturity |
-| 2.0.0 | Agentic Workspace Platform |
+| **2.2.1** | Frontend & UX overhaul — responsive, design-token theming, accessibility, graph/admin UX |
+| 2.2.0 | Multimodal-first Knowledge Graph, source disclosure, Gemma-4 recommendation policy |
+| 2.1.0 | Agent platform maturity |
+| 2.0.0 | Agentic workspace platform |
 | 1.7.0 | Graph and collaboration |
 | 1.6.0 | Product experience deepening |
-| 1.5.0 | Unified product release |
+
+## License
+
+MIT

package/docs/CHANGELOG.md

@@ -1,5 +1,43 @@
 # Changelog
 
+## [2.2.1] - 2026-06-04
+
+> Frontend / UX Overhaul Release — Lattice AI keeps feature behavior stable
+> while improving responsive layout, theme handling, accessibility, graph UX,
+> admin tables, file attachment, and release packaging readiness.
+
+### Added
+
+- **Light/dark mode** — OS detection, manual theme toggle, and persisted theme
+  state.
+- **File attachment UX** — drag-and-drop and screenshot paste support for
+  attachments.
+- **Knowledge Graph controls** — zoom buttons, fullscreen, minimap,
+  relationship filter, mobile graph/card view, and theme-aware palette.
+
+### Changed
+
+- **Responsive UI** — phone/tablet/laptop/desktop/ultrawide/4K layouts now use
+  mobile-first reflow. Content is not hidden on smaller screens.
+- **Design tokens** — `static/css/tokens.css` is the single source of truth for
+  UI tokens, and theme styling no longer depends on `!important`.
+- **Accessibility** — 44px touch targets, `:focus-visible` focus rings,
+  keyboard-safe chat composer behavior, iOS no-zoom inputs, and reduced-motion
+  support.
+- **Admin UX** — wide admin tables reflow to mobile cards with larger touch
+  targets and light/dark support.
+- **Model cards** — country, company, run mode, and internet usage are shown in
+  plain language.
+- **Manual release scripts** — local publish scripts now build exact-version
+  artifacts before upload and validate the same artifact set used by CI.
+
+### Validation
+
+- Unit/integration suites, Python build, npm pack, VSIX package, and
+  exact-version release artifact validation are the release targets.
+- Package-store publishing remains manual and must use the exact 2.2.1
+  filenames.
+
 ## [2.2.0] - 2026-06-04
 
 > Multimodal-First Knowledge OS Release — Lattice AI is aligned around the

package/docs/architecture.md

@@ -1,9 +1,9 @@
 # Lattice AI Architecture
 
-Lattice AI v2.2.0 is a local-first **AI Knowledge OS**. The architecture is
-organized around one durable center: the Knowledge Graph. Models, tools,
-agents, workflows, and UI modes are replaceable layers that operate on top of
-the graph.
+Lattice AI is a local-first **AI Workspace and Knowledge Graph platform**. The
+architecture is organized around one durable center: the Knowledge Graph.
+Models, tools, agents, workflows, and UI modes are replaceable layers that
+operate on top of the graph.
 
 ## Architecture Goals
 

package/docs/spec-vs-impl.md

@@ -20,7 +20,7 @@
 PPT 명세는 "한 코드·다섯 화면" — Shared Core(Design Tokens, UI Components, Business Logic, AI/Graph Core) 위에서 Tauri(데스크탑) / Capacitor·RN(모바일) 렌더러가 같은 결과를 낸다.
 
 **현재 구현**
-- `static/chat.html`, `static/graph.html`, `static/admin.html`, `static/account.html` 4개 HTML — 각자 자체 CSS 변수 보유
+- `static/chat.html`, `static/graph.html`, `static/admin.html`, `static/account.html` 4개 HTML — `static/css/tokens.css` 단일 토큰을 공유 (v2.2.1)
 - `vscode-extension/` — TypeScript VSCode 통합
 - `static/manifest.json` + `static/sw.js` — PWA 부분 지원 (iOS/Android 홈 화면 추가는 됨)
 - `telegram_bot.py` — Telegram 미러
@@ -28,11 +28,11 @@ PPT 명세는 "한 코드·다섯 화면" — Shared Core(Design Tokens, UI Comp
 **갭**
 - 데스크탑 네이티브 셸 (Tauri) 미구현
 - 모바일 네이티브 (Capacitor / RN) 미구현
-- 4개 HTML이 각자 다른 색 토큰 사용 → 같은 화면이 같게 안 보임
 - 다국어(i18n) 시스템화 안 됨 (HTML에 한글 하드코딩)
 
-**보강 결과물**
-- `static/css/tokens.css` (이번 PR에서 추가) — 4개 HTML이 공유할 단일 진실 토큰
+**보강 결과물 (완료, v2.2.1)**
+- `static/css/tokens.css` — 4개 HTML이 공유하는 단일 진실 토큰 (`:root` = 라이트, `[data-lt-theme="dark"]` = 다크)
+- `static/css/responsive.css` + `static/scripts/ux.js` — 반응형 레이아웃 / 라이트·다크 토글 + OS 감지 + 지속화
 - 로드맵: `apps/desktop/` (Tauri 셸) · `apps/mobile/` (Capacitor 셸) 차후 단계
 
 ---
@@ -91,7 +91,9 @@ chunks ( id, source_node, text, metadata_json, created_at )
 
 ## 4. 디자인 일관성
 
-| 파일 | 현재 --bg | 현재 --accent |
+기존(v2.2.1 이전)에는 4개 HTML 이 각자 다른 색 토큰을 갖고 있었다:
+
+| 파일 | 이전 --bg | 이전 --accent |
 |------|-----------|---------------|
 | `chat.html`   | `#182332` 다크 블루그린 | `#22d3a0` 민트 |
 | `graph.html`  | `#282a36` 다크 그레이   | `#a77cff` 라일락 |
@@ -100,9 +102,10 @@ chunks ( id, source_node, text, metadata_json, created_at )
 | `lattice-reference.css` | (라이트, PPT) | `#6f42e8` Lattice 보라 |
 | **PPT 명세** | `#FFFFFF` 또는 `#0B0B16` | `#6E4AE6` Lattice 보라 |
 
-**보강 결과물**
-- `static/css/tokens.css` — 단일 토큰 (PPT 명세 그대로)
-- 4개 HTML 의 `:root {}` 블록을 `@import` 한 줄로 대체 가능하도록 토큰 명 호환
+**보강 결과물 (완료, v2.2.1)**
+- `static/css/tokens.css` — 단일 토큰을 모든 화면이 공유. `:root` 가 라이트 값,
+  `[data-lt-theme="dark"]` 가 다크 값을 정의하는 단일 진실 소스
+- 라이트/다크 토글 + OS 다크모드 감지 + 지속화는 `static/scripts/ux.js` 가 담당
 
 ---
 
@@ -124,9 +127,9 @@ PPT 화면 1, 13 (login, security) 에 한국어 / Microsoft Entra ID / Okta SSO
 | 순위 | 파일 | 무엇 |
 |------|------|------|
 | 1 | `docs/kg-schema.md`, `kg_schema.py` | KG 스키마 정식화 (10 노드 · 12 엣지 · embedding · confidence) |
-| 2 | `static/css/tokens.css` | 디자인 토큰 통합 (PPT 색팔레트) |
+| 2 | `static/css/tokens.css` (+ `responsive.css`, `ux.js`) | 디자인 토큰 통합 + 라이트/다크 — v2.2.1 완료 |
 | 3 | `auto_setup.py` | OS 프로빙 + 모델 추천 + 설치 어댑터 |
 | 4 | `docs/architecture.md` 보강 | 위 변경 반영 |
 | 5 | (차후) `apps/desktop`, `apps/mobile` 스캐폴딩 | Tauri/Capacitor |
 
-각 항목은 이번 PR 에 함께 들어간다 (1~3은 코드, 4는 문서, 5는 청사진만).
+1~4 는 구현/문서로 반영되었고 (디자인 토큰·라이트/다크는 v2.2.1 에서 완료), 5 는 청사진만 유지한다.

package/latticeai/__init__.py

@@ -1,3 +1,3 @@
 """Lattice AI - modular server package."""
 
-__version__ = "2.2.0"
+__version__ = "2.2.1"

package/latticeai/core/workspace_os.py

@@ -18,7 +18,7 @@ from pathlib import Path
 from typing import Any, Callable, Dict, Iterable, List, Optional
 
 
-WORKSPACE_OS_VERSION = "2.2.0"
+WORKSPACE_OS_VERSION = "2.2.1"
 
 # Workspace types separate single-user Personal workspaces from shared
 # Organization workspaces. Both keep the same local-first JSON store; the type

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ltcai",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "Lattice AI Workspace OS for local-first graph, memory, agent, workflow, and skill operations",
   "homepage": "https://github.com/TaeSooPark-PTS/LatticeAI#readme",
   "repository": {
@@ -29,8 +29,13 @@
     "capture:skills": "node scripts/capture/capture_skills.js",
     "capture:enterprise": "node scripts/capture/capture_enterprise.js",
     "capture:onboarding": "node scripts/capture/capture_onboarding.js",
-    "publish:npm": "npm publish --access public",
-    "publish:pypi": "python3 -m twine upload --skip-existing dist/ltcai-$npm_package_version.tar.gz dist/ltcai-$npm_package_version-py3-none-any.whl"
+    "release:artifacts": "npm run build:python && npm pack && cd vscode-extension && npm run package:vsix",
+    "release:validate": "python3 scripts/validate_release_artifacts.py $npm_package_version --require-vsix --require-tgz",
+    "publish:npm": "npm pack && npm publish ltcai-$npm_package_version.tgz --access public",
+    "publish:pypi": "npm run build:python && python3 -m twine upload --skip-existing dist/ltcai-$npm_package_version.tar.gz dist/ltcai-$npm_package_version-py3-none-any.whl",
+    "publish:vscode": "cd vscode-extension && npm run package:vsix && npm run publish:vscode",
+    "publish:openvsx": "cd vscode-extension && npm run package:vsix && npm run publish:openvsx",
+    "publish:all": "npm run release:artifacts && npm run release:validate && npm publish ltcai-$npm_package_version.tgz --access public && python3 -m twine upload --skip-existing dist/ltcai-$npm_package_version.tar.gz dist/ltcai-$npm_package_version-py3-none-any.whl && cd vscode-extension && npm run publish:vscode && npm run publish:openvsx"
   },
   "keywords": [
     "ltcai",

package/static/account.html

@@ -2,8 +2,9 @@
 <html lang="ko">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">
     <title>Lattice AI</title>
+    <script src="/static/scripts/ux.js?v=2.2.1"></script>
     <link rel="manifest" href="/manifest.json">
     <meta name="theme-color" content="#f3ecff">
     <meta name="apple-mobile-web-app-capable" content="yes">
@@ -14,6 +15,7 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
     <link rel="stylesheet" href="/static/lattice-reference.css?v=0.3.3">
+    <link rel="stylesheet" href="/static/css/responsive.css?v=2.2.1">
 </head>
 <body class="lattice-ref-auth">
     <div class="orb orb-1"></div>

package/static/activity.html

@@ -2,9 +2,12 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
   <title>Realtime Activity — Lattice AI</title>
-  <link rel="stylesheet" href="/static/platform.css" />
+  <script src="/static/scripts/ux.js?v=2.2.1"></script>
+  <link rel="stylesheet" href="/static/css/tokens.css?v=2.2.1" />
+  <link rel="stylesheet" href="/static/platform.css?v=2.2.1" />
+  <link rel="stylesheet" href="/static/css/responsive.css?v=2.2.1" />
 </head>
 <body>
   <main>

package/static/admin.html

@@ -3,8 +3,9 @@
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">
     <title>Lattice AI Admin</title>
+    <script src="/static/scripts/ux.js?v=2.2.1"></script>
     <link rel="manifest" href="/manifest.json">
     <meta name="theme-color" content="#f3ecff">
     <meta name="apple-mobile-web-app-capable" content="yes">
@@ -15,10 +16,13 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
     <link rel="stylesheet" href="/static/lattice-reference.css?v=0.3.3">
+    <link rel="stylesheet" href="/static/css/responsive.css?v=2.2.1">
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
 </head>
 
 <body class="lattice-ref-admin">
+    <div class="sidebar-overlay" onclick="closeAdminRail&&closeAdminRail()"></div>
+    <button class="admin-rail-toggle graph-nav-toggle" onclick="toggleAdminRail&&toggleAdminRail()" title="메뉴" aria-label="관리자 메뉴 열기"><i class="ti ti-menu-2"></i></button>
     <aside class="reference-rail admin-rail">
         <div class="rail-brand"><i class="ti ti-shield-lock"></i><strong>LATTICE AI</strong><span>Administrator</span></div>
         <nav>

package/static/agents.html

@@ -2,9 +2,12 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
   <title>Multi-Agent Runtime — Lattice AI</title>
-  <link rel="stylesheet" href="/static/platform.css" />
+  <script src="/static/scripts/ux.js?v=2.2.1"></script>
+  <link rel="stylesheet" href="/static/css/tokens.css?v=2.2.1" />
+  <link rel="stylesheet" href="/static/platform.css?v=2.2.1" />
+  <link rel="stylesheet" href="/static/css/responsive.css?v=2.2.1" />
 </head>
 <body>
   <main>

package/static/chat.html

@@ -3,8 +3,9 @@
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">
     <title>Lattice AI — All-in-One Multimodal Workspace</title>
+    <script src="/static/scripts/ux.js?v=2.2.1"></script>
 
     <!-- PWA -->
     <link rel="manifest" href="/manifest.json">
@@ -24,6 +25,7 @@
 
     <!-- ── Setup Wizard Styles ──────────────────────────────────────────── -->
     <link rel="stylesheet" href="/static/lattice-reference.css?v=0.3.3">
+    <link rel="stylesheet" href="/static/css/responsive.css?v=2.2.1">
 </head>
 
 <body class="lattice-ref-chat">
@@ -37,7 +39,7 @@
 
 
     <div class="app-layout">
-        <div class="sidebar-overlay" onclick="closeSidebar()"></div>
+        <div class="sidebar-overlay" onclick="closeSidebar();closeGraphNav&&closeGraphNav();closeAdminRail&&closeAdminRail()"></div>
         <!-- Sidebar -->
         <aside class="sidebar">
             <div class="sidebar-header">
@@ -81,6 +83,7 @@
                     <div class="mode-segmented" id="mode-segmented" role="tablist" aria-label="작업 모드"></div>
                 </div>
                 <div class="header-pills">
+                    <button class="theme-toggle" onclick="toggleTheme()" title="테마 전환" aria-label="라이트/다크 테마 전환"><i class="ti ti-moon"></i><i class="ti ti-sun"></i></button>
                     <div class="lang-picker" id="header-lang-picker">
                         <button class="logout-btn" id="lang-btn" onclick="toggleLangMenu('header-lang-picker')" title="Language"><i class="ti ti-language"></i> Language</button>
                         <div class="lang-picker-menu" id="header-lang-picker-menu">
@@ -93,7 +96,7 @@
                 </div>
             </header>
 
-            <div class="acct-modal-overlay" id="acct-modal-overlay">
+            <div class="acct-modal-overlay" id="acct-modal-overlay" onclick="if(event.target===this)closeAcctModal()">
                 <div class="acct-modal">
                     <div class="acct-tabs">
                         <button class="acct-tab active" id="tab-profile" onclick="switchAcctTab('profile')" data-i18n="tab_profile">프로필</button>
@@ -477,7 +480,7 @@
 
     <!-- ── 파일 에디터 ── -->
     <div id="file-editor-overlay" class="admin-overlay" style="display:none">
-        <section class="admin-panel" style="max-width:720px;height:85vh;display:flex;flex-direction:column">
+        <section class="admin-panel" style="max-width:720px;height:min(85dvh, calc(100dvh - 24px));display:flex;flex-direction:column">
             <div class="admin-header" style="flex-shrink:0">
                 <div style="min-width:0;flex:1">
                     <h2><i class="ti ti-file-pencil" style="color:var(--accent)"></i> 파일 편집</h2>