ltcai 2.1.0 → 2.2.1

package/static/scripts/graph.js

@@ -181,6 +181,7 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
     let rawGraph = { nodes: [], edges: [] };
     let graph = { nodes: [], edges: [] };
     let hiddenTypes = new Set();
+    let hiddenEdgeTypes = new Set();
     let selected = null;
     let hovered = null;
     let dragging = null;
@@ -500,6 +501,21 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
     window.runLocalIndex = runLocalIndex;
     window.approveLocalPermission = approveLocalPermission;
 
+    /* 테마 색상 — CSS 변수에서 캔버스 배경/텍스트를 읽어 다크모드 대응 */
+    let themeColors = { bg: '#ffffff', text: '#14162c', surface: '#ffffff' };
+    function refreshThemeColors() {
+      const cs = getComputedStyle(document.documentElement);
+      const read = (name, fallback) => {
+        const v = (cs.getPropertyValue(name) || '').trim();
+        return v || fallback;
+      };
+      themeColors = {
+        bg: read('--bg', '#ffffff'),
+        text: read('--text', '#14162c'),
+        surface: read('--surface', read('--surface-2', '#ffffff')),
+      };
+    }
+
     function nodeColor(type) {
       return (TYPE_CONFIG[type] || {}).color || '#8fa8bb';
     }
@@ -641,6 +657,7 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
       const byId = Object.fromEntries(rawGraph.nodes.map(node => [node.id, node]));
       graph.edges = rawGraph.edges
         .filter(edge => nodeSet.has(edge.from) && nodeSet.has(edge.to))
+        .filter(edge => !hiddenEdgeTypes.has(edge.type))
         .map(edge => ({ ...edge, source: byId[edge.from], target: byId[edge.to] }));
       renderFocusChip();
     }
@@ -808,16 +825,26 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
       }
       container.innerHTML = ordered.map(type => {
         const style = edgeStyle(type);
+        const checked = hiddenEdgeTypes.has(type) ? '' : 'checked';
         return `
-          <div class="legend-item">
+          <label class="filter-item">
+            <input type="checkbox" ${checked} onchange="toggleEdgeType(decodeURIComponent('${encodeURIComponent(type)}'), this.checked)">
             <span class="legend-line" style="border-top-color:${style.color}; border-top-width:${Math.max(2, style.width)}px;"></span>
-            <span class="legend-name">${escapeHtml(style.label || type)}</span>
-            <span class="legend-meta">${edgeCounts[type] || 0}</span>
-          </div>
+            <span class="filter-name">${escapeHtml(style.label || type)}</span>
+            <span class="filter-count">${edgeCounts[type] || 0}</span>
+          </label>
         `;
       }).join('');
     }
 
+    function toggleEdgeType(type, visible) {
+      if (visible) hiddenEdgeTypes.delete(type);
+      else hiddenEdgeTypes.add(type);
+      applyFilter();
+      wakeUp();
+    }
+    window.toggleEdgeType = toggleEdgeType;
+
     function toggleType(type, visible) {
       if (visible) hiddenTypes.delete(type);
       else hiddenTypes.add(type);
@@ -929,6 +956,9 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
       ctx.translate(cam.tx, cam.ty);
       ctx.scale(cam.scale, cam.scale);
 
+      // LOD: 줌이 너무 작거나 노드가 많으면 레이블 생략 (모바일 성능)
+      const showLabels = cam.scale >= 0.5 && graph.nodes.length <= 220;
+
       const active = hovered || selected;
       const neighborSet = active ? neighborIds(active) : null;
 
@@ -997,8 +1027,8 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
           ctx.globalAlpha = alpha;
         }
 
-        // 레이블 항상 노드 아래에 표시
-        {
+        // 레이블 표시 (LOD: 줌이 작거나 노드가 많으면 생략 — 모바일 성능)
+        if (showLabels || isSelected || isHovered || isSearchHit) {
           const label = node.title.slice(0, 24);
           const fs = Math.max(9.5, 12 / cam.scale);
           ctx.font = `600 ${fs}px "SF Pro Display","Inter",system-ui`;
@@ -1008,8 +1038,9 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
           const ly = node.y + gap + fs;
           const pad = 4 / cam.scale;
           const br  = 5 / cam.scale;
-          // 흰 배경 pill
-          ctx.fillStyle = alpha > 0.5 ? 'rgba(255,255,255,0.88)' : 'rgba(255,255,255,0.22)';
+          // 테마 대응 배경 pill (라이트=흰색, 다크=surface)
+          ctx.globalAlpha = alpha > 0.5 ? alpha * 0.88 : alpha * 0.22;
+          ctx.fillStyle = themeColors.surface;
           ctx.beginPath();
           if (ctx.roundRect) {
             ctx.roundRect(lx - pad, ly - fs, lw + pad * 2, fs + pad * 1.6, br);
@@ -1017,14 +1048,17 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
             ctx.rect(lx - pad, ly - fs, lw + pad * 2, fs + pad * 1.6);
           }
           ctx.fill();
-          ctx.fillStyle = alpha > 0.5 ? '#14162c' : 'rgba(20,22,44,0.3)';
+          ctx.globalAlpha = alpha > 0.5 ? alpha : alpha * 0.3;
+          ctx.fillStyle = themeColors.text;
           ctx.fillText(label, lx, ly);
+          ctx.globalAlpha = alpha;
         }
 
         ctx.globalAlpha = 1;
       });
 
       ctx.restore();
+      drawMinimap();
       if (kineticEnergy > 0.04 || dragging) animFrameId = requestAnimationFrame(draw);
     }
 
@@ -1627,10 +1661,134 @@ const API_BASE = window.location.protocol === 'file:' ? 'http://localhost:4825'
       });
     });
 
-    window.addEventListener('resize', () => {
+    // 리사이즈/회전/키보드(visualViewport) 시 캔버스 재측정 + 자동 재맞춤
+    // (기존엔 backing store만 리사이즈해서 모바일에서 그래프가 화면 밖으로 나갔음)
+    let resizeFitTimer = null;
+    function handleViewportChange() {
       resize();
       wakeUp();
-    });
+      clearTimeout(resizeFitTimer);
+      resizeFitTimer = setTimeout(() => { resize(); fitToScreen(); }, 180);
+    }
+    window.addEventListener('resize', handleViewportChange);
+    window.addEventListener('orientationchange', handleViewportChange);
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener('resize', handleViewportChange);
+    }
+
+    /* ──────────────────────────────────────────────────────────────────
+       v2.2.1 그래프 1급 UI: 줌 버튼 · 전체화면 · 미니맵 · 카드뷰 · 테마대응
+       ────────────────────────────────────────────────────────────────── */
+    // 캔버스가 터치를 직접 소유 (브라우저 기본 제스처와 충돌 방지)
+    if (canvas && canvas.style) canvas.style.touchAction = 'none';
+
+    function zoomBy(factor) {
+      const px = width / 2, py = height / 2;
+      const next = clamp(cam.scale * factor, 0.07, 6);
+      cam.tx = px - (px - cam.tx) * (next / cam.scale);
+      cam.ty = py - (py - cam.ty) * (next / cam.scale);
+      cam.scale = next;
+      wakeUp();
+    }
+
+    const stageEl = document.querySelector('.stage');
+    function toggleFullscreen() {
+      const fsEl = document.fullscreenElement || document.webkitFullscreenElement;
+      if (!fsEl && stageEl) {
+        (stageEl.requestFullscreen || stageEl.webkitRequestFullscreen || function () {}).call(stageEl);
+      } else {
+        (document.exitFullscreen || document.webkitExitFullscreen || function () {}).call(document);
+      }
+    }
+    document.addEventListener('fullscreenchange', handleViewportChange);
+    document.addEventListener('webkitfullscreenchange', handleViewportChange);
+
+    // 미니맵 — 전체 노드 개요 + 현재 뷰포트 사각형 (클릭 시 그 지점으로 이동)
+    const minimap = document.getElementById('minimap');
+    const mmCtx = minimap ? minimap.getContext('2d') : null;
+    function drawMinimap() {
+      if (!mmCtx || !minimap || minimap.offsetParent === null) return;
+      const W = minimap.width, H = minimap.height;
+      mmCtx.clearRect(0, 0, W, H);
+      if (!graph.nodes.length) return;
+      let x0 = Infinity, x1 = -Infinity, y0 = Infinity, y1 = -Infinity;
+      graph.nodes.forEach(n => { x0 = Math.min(x0, n.x); x1 = Math.max(x1, n.x); y0 = Math.min(y0, n.y); y1 = Math.max(y1, n.y); });
+      const pad = 8, gw = Math.max(1, x1 - x0), gh = Math.max(1, y1 - y0);
+      const s = Math.min((W - pad * 2) / gw, (H - pad * 2) / gh);
+      const ox = pad - x0 * s + (W - pad * 2 - gw * s) / 2;
+      const oy = pad - y0 * s + (H - pad * 2 - gh * s) / 2;
+      graph.nodes.forEach(n => {
+        mmCtx.fillStyle = nodeColor(n.type);
+        mmCtx.beginPath();
+        mmCtx.arc(ox + n.x * s, oy + n.y * s, 1.6, 0, Math.PI * 2);
+        mmCtx.fill();
+      });
+      const vx0 = (0 - cam.tx) / cam.scale, vy0 = (0 - cam.ty) / cam.scale;
+      const vx1 = (width - cam.tx) / cam.scale, vy1 = (height - cam.ty) / cam.scale;
+      mmCtx.strokeStyle = 'rgba(110,74,230,0.95)';
+      mmCtx.lineWidth = 1.2;
+      mmCtx.strokeRect(ox + vx0 * s, oy + vy0 * s, (vx1 - vx0) * s, (vy1 - vy0) * s);
+      minimap._map = { ox, oy, s };
+    }
+    if (minimap) {
+      minimap.addEventListener('click', (event) => {
+        const m = minimap._map; if (!m) return;
+        const rect = minimap.getBoundingClientRect();
+        const mx = (event.clientX - rect.left) * (minimap.width / rect.width);
+        const my = (event.clientY - rect.top) * (minimap.height / rect.height);
+        cam.tx = width / 2 - ((mx - m.ox) / m.s) * cam.scale;
+        cam.ty = height / 2 - ((my - m.oy) / m.s) * cam.scale;
+        wakeUp();
+      });
+    }
+
+    // 모바일 카드 뷰 — 노드를 탭 가능한 카드 목록으로 (캔버스가 너무 빽빽할 때)
+    const graphCardList = document.getElementById('graph-card-list');
+    function renderGraphCards() {
+      if (!graphCardList) return;
+      if (!graph.nodes.length) {
+        graphCardList.innerHTML = `<p class="search-empty">${t('search_empty')}</p>`;
+        return;
+      }
+      graphCardList.innerHTML = '<div class="search-list">' + graph.nodes.slice(0, 400).map(n => `
+        <button class="search-item" data-node-id="${escapeHtml(n.id)}">
+          <div class="search-item-top">
+            <span class="type-badge" style="background:${nodeColor(n.type)}">${escapeHtml(n.type || '')}</span>
+            <span class="search-item-title">${escapeHtml(n.title || n.id)}</span>
+          </div>
+          ${n.summary ? `<p class="search-item-summary">${escapeHtml(n.summary)}</p>` : ''}
+        </button>
+      `).join('') + '</div>';
+    }
+    function toggleGraphCardView() {
+      document.body.classList.toggle('graph-card-view');
+      if (document.body.classList.contains('graph-card-view')) renderGraphCards();
+    }
+    if (graphCardList) {
+      graphCardList.addEventListener('click', (event) => {
+        const target = event.target.closest('[data-node-id]');
+        if (!target) return;
+        const node = graph.nodes.find(n => n.id === target.dataset.nodeId);
+        if (!node) return;
+        document.body.classList.remove('graph-card-view');
+        selected = node;
+        showDetail(node);
+        centerOnNode(node, Math.max(cam.scale, 1));
+      });
+    }
+
+    // 테마(라이트/다크) 변경 시 캔버스 색상 갱신
+    refreshThemeColors();
+    try {
+      const themeObserver = new MutationObserver(() => { refreshThemeColors(); wakeUp(); });
+      themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-lt-theme'] });
+    } catch (e) { /* noop */ }
+
+    const bindClick = (id, fn) => { const el = document.getElementById(id); if (el) el.addEventListener('click', fn); };
+    bindClick('zoom-in-btn', () => zoomBy(1.25));
+    bindClick('zoom-out-btn', () => zoomBy(1 / 1.25));
+    bindClick('fullscreen-btn', toggleFullscreen);
+    bindClick('view-toggle-btn', toggleGraphCardView);
 
     resize();
     applyI18n();

package/static/scripts/ux.js

@@ -0,0 +1,167 @@
+/* ============================================================================
+ * Lattice AI — Shared UX runtime (v2.2.1)
+ *
+ * 모든 페이지에서 로드된다. 페이지마다 일부 요소가 없을 수 있으므로 전부
+ * 방어적으로(존재 확인 후) 동작한다. 기존 chat.js / graph.js / admin.js 의
+ * 함수를 재정의하지 않고, 새 전역 기능만 추가한다.
+ *
+ *   - 다크/라이트 테마 (localStorage + OS 선호 + 토글)
+ *   - 모바일 키보드 inset (--kb-inset) : 입력창이 키보드에 안 가리게
+ *   - Escape 로 열린 모달/오버레이 닫기
+ *   - 브레이크포인트 넘으면 열린 드로어 자동 정리
+ *   - 그래프/관리자 네비 드로어 토글
+ * ========================================================================== */
+(function () {
+  "use strict";
+
+  var root = document.documentElement;
+
+  /* ---------- 1. 테마 ---------- */
+  var THEME_KEY = "lt-theme";
+
+  function systemPrefersDark() {
+    return window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+
+  function storedTheme() {
+    try { return localStorage.getItem(THEME_KEY); } catch (e) { return null; }
+  }
+
+  function applyTheme(mode) {
+    if (mode !== "dark" && mode !== "light") {
+      mode = systemPrefersDark() ? "dark" : "light";
+    }
+    root.setAttribute("data-lt-theme", mode);
+    return mode;
+  }
+
+  // 초기 적용 (FOUC 최소화를 위해 가능한 한 빨리)
+  applyTheme(storedTheme());
+
+  window.setTheme = function (mode) {
+    var applied = applyTheme(mode);
+    try { localStorage.setItem(THEME_KEY, applied); } catch (e) {}
+    return applied;
+  };
+
+  window.toggleTheme = function () {
+    var cur = root.getAttribute("data-lt-theme") === "dark" ? "dark" : "light";
+    return window.setTheme(cur === "dark" ? "light" : "dark");
+  };
+
+  // 사용자가 명시 선택을 안 했으면 OS 변화 따라가기
+  if (window.matchMedia) {
+    try {
+      window.matchMedia("(prefers-color-scheme: dark)")
+        .addEventListener("change", function (e) {
+          if (!storedTheme()) applyTheme(e.matches ? "dark" : "light");
+        });
+    } catch (e) { /* Safari < 14 */ }
+  }
+
+  /* ---------- 2. 모바일 키보드 inset ---------- */
+  var vv = window.visualViewport;
+  if (vv) {
+    var updateKbInset = function () {
+      // 레이아웃 뷰포트와 비주얼 뷰포트의 차이 = 키보드(또는 브라우저 UI) 높이
+      var inset = Math.max(0, window.innerHeight - vv.height - vv.offsetTop);
+      // 작은 값(브라우저 바 미세 변화)은 무시
+      root.style.setProperty("--kb-inset", (inset > 80 ? inset : 0) + "px");
+    };
+    vv.addEventListener("resize", updateKbInset);
+    vv.addEventListener("scroll", updateKbInset);
+    // 입력에 포커스되면 화면 안으로 스크롤
+    document.addEventListener("focusin", function (e) {
+      var t = e.target;
+      if (t && (t.tagName === "TEXTAREA" || t.tagName === "INPUT")) {
+        setTimeout(function () {
+          if (t.scrollIntoView) {
+            try { t.scrollIntoView({ block: "center", behavior: "smooth" }); }
+            catch (err) { t.scrollIntoView(); }
+          }
+        }, 250);
+      }
+    });
+  }
+
+  /* ---------- 3. 드로어 토글 (그래프 / 관리자) ---------- */
+  function bodyHas(cls) { return document.body.classList.contains(cls); }
+
+  window.toggleGraphNav = function () {
+    document.body.classList.toggle("graph-nav-open");
+  };
+  window.closeGraphNav = function () {
+    document.body.classList.remove("graph-nav-open");
+  };
+  window.toggleAdminRail = function () {
+    document.body.classList.toggle("admin-rail-open");
+  };
+  window.closeAdminRail = function () {
+    document.body.classList.remove("admin-rail-open");
+  };
+
+  /* ---------- 4. Escape 로 닫기 ---------- */
+  var OVERLAY_SELECTORS = [
+    ".acct-modal-overlay", ".mcp-modal-overlay", ".mode-modal-overlay",
+    ".workspace-modal-overlay", ".advanced-settings-overlay", ".model-overlay",
+    ".perm-overlay", ".onboarding-overlay", ".pipeline-overlay",
+    ".admin-overlay", ".vpc-overlay", ".status-overlay", ".cu-overlay",
+    ".file-create-overlay", ".file-editor-overlay", ".local-browser-overlay"
+  ];
+
+  function isVisible(el) {
+    if (!el) return false;
+    var s = window.getComputedStyle(el);
+    return s.display !== "none" && s.visibility !== "hidden" && el.offsetParent !== null;
+  }
+
+  function closeTopOverlay() {
+    // 1) 드로어 먼저
+    if (bodyHas("sidebar-open")) { document.body.classList.remove("sidebar-open"); return true; }
+    if (bodyHas("graph-nav-open")) { window.closeGraphNav(); return true; }
+    if (bodyHas("admin-rail-open")) { window.closeAdminRail(); return true; }
+
+    // 2) 보이는 오버레이를 위에서부터 닫기
+    var overlays = document.querySelectorAll(OVERLAY_SELECTORS.join(","));
+    for (var i = overlays.length - 1; i >= 0; i--) {
+      var el = overlays[i];
+      if (isVisible(el)) {
+        // 닫기 버튼이 있으면 클릭, 없으면 직접 숨김
+        var btn = el.querySelector(
+          "[onclick*='close'],.modal-close,.mcp-modal-close,.admin-close,.mode-close,.acct-close"
+        );
+        if (btn && btn.click) { btn.click(); }
+        else { el.style.display = "none"; }
+        return true;
+      }
+    }
+    return false;
+  }
+
+  document.addEventListener("keydown", function (e) {
+    if (e.key === "Escape" || e.keyCode === 27) {
+      if (closeTopOverlay()) { e.stopPropagation(); }
+    }
+  });
+
+  /* ---------- 5. 브레이크포인트 넘으면 드로어 정리 ---------- */
+  if (window.matchMedia) {
+    var desktop = window.matchMedia("(min-width: 1025px)");
+    var onDesktop = function (e) {
+      if (e.matches) {
+        document.body.classList.remove("sidebar-open", "graph-nav-open", "admin-rail-open");
+      }
+    };
+    try { desktop.addEventListener("change", onDesktop); }
+    catch (e2) { /* old Safari */ try { desktop.addListener(onDesktop); } catch (e3) {} }
+  }
+
+  /* ---------- 6. 새 드로어용 오버레이 백드롭 클릭 ---------- */
+  document.addEventListener("click", function (e) {
+    var t = e.target;
+    if (t && t.classList && t.classList.contains("sidebar-overlay")) {
+      document.body.classList.remove("graph-nav-open", "admin-rail-open");
+    }
+  });
+})();

package/static/workflows.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>Workflow Designer — 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/workspace.css

@@ -1,21 +1,42 @@
 :root {
-  color-scheme: light;
-  --bg: #f6f7f9;
-  --surface: #ffffff;
-  --surface-2: #f0f4f8;
-  --ink: #101828;
-  --muted: #667085;
-  --line: #d9e0e8;
-  --blue: #2563eb;
+  /* Map the local palette onto the shared design tokens so this page
+     inverts cleanly under :root[data-lt-theme="dark"]. Light defaults
+     stay visually close to the original hand-tuned values. */
+  --bg: var(--lt-bg, #f6f7f9);
+  --surface: var(--lt-surface, #ffffff);
+  --surface-2: var(--lt-surface-2, #f0f4f8);
+  --ink: var(--lt-ink, #101828);
+  --muted: var(--lt-muted, #667085);
+  --line: var(--lt-line, #d9e0e8);
+  --blue: var(--lt-accent, #2563eb);
   --green: #12805c;
   --amber: #b45309;
   --pink: #be185d;
   --red: #c2410c;
   --radius: 8px;
-  --shadow: 0 12px 34px rgba(16, 24, 40, 0.08);
+  --shadow: var(--lt-shadow-md, 0 12px 34px rgba(16, 24, 40, 0.08));
+  /* Rail keeps its dark-navy identity in light mode; dark mode remaps it
+     to a shared surface token below so it inverts coherently. */
+  --rail-bg: #111827;
+  --rail-ink: #e5e7eb;
+  --rail-ink-soft: #b8c0cc;
+  --rail-ink-strong: #fff;
+  --rail-hover: rgba(255, 255, 255, 0.08);
+  --rail-line: rgba(255, 255, 255, 0.12);
   font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
 
+/* Dark theme: remap the rail to the shared surface tokens so it inverts
+   instead of staying permanently navy. */
+:root[data-lt-theme="dark"] {
+  --rail-bg: var(--lt-surface-2);
+  --rail-ink: var(--lt-ink);
+  --rail-ink-soft: var(--lt-ink-soft);
+  --rail-ink-strong: var(--lt-ink);
+  --rail-hover: rgba(255, 255, 255, 0.06);
+  --rail-line: var(--lt-line);
+}
+
 * { box-sizing: border-box; }
 
 html { scroll-behavior: smooth; }
@@ -40,14 +61,16 @@ button {
   display: grid;
   grid-template-columns: 248px minmax(0, 1fr);
   min-height: 100vh;
+  min-height: 100dvh;
 }
 
 .workspace-rail {
   position: sticky;
   top: 0;
   height: 100vh;
-  background: #111827;
-  color: #e5e7eb;
+  height: 100dvh;
+  background: var(--rail-bg);
+  color: var(--rail-ink);
   padding: 18px 14px;
   display: flex;
   flex-direction: column;
@@ -58,7 +81,7 @@ button {
   display: flex;
   align-items: center;
   gap: 10px;
-  color: #fff;
+  color: var(--rail-ink-strong);
   text-decoration: none;
   font-weight: 800;
   padding: 8px;
@@ -77,7 +100,7 @@ button {
 }
 
 .workspace-rail a {
-  color: #b8c0cc;
+  color: var(--rail-ink-soft);
   text-decoration: none;
 }
 
@@ -94,12 +117,12 @@ button {
 .workspace-rail nav a.active,
 .workspace-rail nav a:hover,
 .rail-links a:hover {
-  background: rgba(255,255,255,0.08);
-  color: #fff;
+  background: var(--rail-hover);
+  color: var(--rail-ink-strong);
 }
 
 .rail-links {
-  border-top: 1px solid rgba(255,255,255,0.12);
+  border-top: 1px solid var(--rail-line);
   padding-top: 12px;
   margin-top: auto;
 }
@@ -521,8 +544,8 @@ textarea {
   gap: 8px;
   padding: 6px 10px;
   border-radius: 10px;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: var(--rail-hover);
+  border: 1px solid var(--rail-line);
 }
 .workspace-switcher select {
   background: transparent;
@@ -600,7 +623,7 @@ textarea {
 /* Enterprise capability grid */
 .capability-grid {
   display: grid; gap: 10px;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
   margin-top: 12px;
 }
 .capability-card {
@@ -684,3 +707,16 @@ textarea {
     grid-template-columns: 1fr;
   }
 }
+
+/* v2.2.1 — 태블릿(761~1024) 레일 슬림화로 본문 공간 확보 */
+@media (min-width: 761px) and (max-width: 1024px) {
+  .workspace-shell { grid-template-columns: 196px minmax(0, 1fr); }
+  .workspace-rail { padding: 14px 10px; }
+}
+
+/* v2.2.1 — 터치 영역 44px 보장 */
+@media (hover: none), (max-width: 760px) {
+  .icon-action { min-width: 44px; min-height: 44px; }
+  .small-action { min-height: 44px; }
+  .workspace-rail a { min-height: 44px; display: flex; align-items: center; }
+}

package/static/workspace.html

@@ -2,13 +2,16 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">
   <title>Lattice AI Workspace OS</title>
+  <script src="/static/scripts/ux.js?v=2.2.1"></script>
   <link rel="manifest" href="/manifest.json">
   <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32.png">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@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/workspace.css?v=2.0.0">
+  <link rel="stylesheet" href="/static/css/tokens.css?v=2.2.1">
+  <link rel="stylesheet" href="/static/workspace.css?v=2.2.1">
+  <link rel="stylesheet" href="/static/css/responsive.css?v=2.2.1">
 </head>
 <body>
   <div class="workspace-shell">

package/telegram_bot.py

@@ -840,7 +840,7 @@ async def handle_command(client, chat_id, command: str, args: str):
         await send_message(client, chat_id, HELP_TEXT)
     elif cmd == "agent":
         if not args:
-            await send_message(client, chat_id, "사용법: /agent <작업 내용>\n예: /agent 쇼핑몰 메인 페이지 HTML 만들어줘\n\n특정 LLM 지정:\n/agent <작업> --exec openai/gpt-4o --review deepseek/deepseek-chat")
+            await send_message(client, chat_id, "사용법: /agent <작업 내용>\n예: /agent 쇼핑몰 메인 페이지 HTML 만들어줘\n\n특정 AI 지정:\n/agent <작업> --exec openai/gpt-4o --review together:Qwen/Qwen3-VL-32B-Instruct")
             return
         # Parse optional --exec / --review flags
         exec_model = reviewing_model = None