v2.1

scripts/pptx_gen.py

@@ -332,9 +332,9 @@ def fit_dimensions(img_w, img_h, max_w, max_h, mode="contain"):
     mode='contain': fit entirely within max_w × max_h (default, no cropping)
     mode='cover':   fill max_w × max_h completely, cropping if necessary
     """
-    # Leave a small breathing margin inside the bounding box
-    max_w = int(max_w * 0.95)
-    max_h = int(max_h * 0.95)
+    # Tiny breathing margin — image fills nearly the full bounding box
+    max_w = int(max_w * 1.0)
+    max_h = int(max_h * 1.0)
     if img_w <= 0 or img_h <= 0:
         return max_w, max_h
     ratio = img_w / img_h
@@ -493,17 +493,17 @@ def _text_weight(slide_spec: dict):
 def _auto_text_ratio(slide_spec: dict) -> float:
     """Compute text column share (0–1) based on content volume.
 
-    ≤2 bullets / ≤120 chars  → 0.38  image-dominant
-    3–4 bullets / ≤280 chars → 0.50  balanced
-    5+ bullets  / >280 chars → 0.62  text-dominant
+    ≤2 bullets / ≤120 chars  → 0.32  image-dominant
+    3–4 bullets / ≤280 chars → 0.44  balanced
+    5+ bullets  / >280 chars → 0.56  text-dominant
     """
     n_bullets, n_chars = _text_weight(slide_spec)
     if n_bullets <= 2 and n_chars <= 120:
-        return 0.38
+        return 0.32
     elif n_bullets <= 4 and n_chars <= 280:
-        return 0.50
+        return 0.44
     else:
-        return 0.62
+        return 0.56
 
 
 # ─── Slide Generators ──────────────────────────────────────────────────────────

us[lash--key.txt

@@ -1,7 +0,0 @@
-cgg70EFDE5B23YA0-IkfDVKef4FcKQJzkDVwp2QhnY0 -- acess key
-
-
-ymuGrXh-pntJmXeRYGzZda7LvTqeCDlrGpF-27f5FrE  -- secret key
-
-
-938436   --  id

usplash,pexels--key.txt

@@ -7,6 +7,8 @@ ymuGrXh-pntJmXeRYGzZda7LvTqeCDlrGpF-27f5FrE  -- secret key
 938436   --  id
 
 
+UNSPLASH_ACCESS_KEY=cgg70EFDE5B23YA0-IkfDVKef4FcKQJzkDVwp2QhnY0
+PEXELS_API_KEY=y7Fm3aGM9MlS9nq8ttsMEowcaCFRibFvxpp6ABg97ZupAoYNHWKSU5Z7
 
 
 

web-ui/index.html

@@ -59,8 +59,8 @@
   * { margin: 0; padding: 0; box-sizing: border-box; }
 
   body {
-    min-height: 100vh;
-    height: 100vh;
+    min-height: 100dvh;
+    height: 100dvh;
     font-family: 'Manrope', sans-serif;
     color: var(--text);
     background:
@@ -1756,22 +1756,87 @@
 
   @media (max-width: 900px) {
     body {
-      padding: 8px;
-      gap: 8px;
-      grid-template-rows: 58px 1fr 280px;
+      padding: 0;
+      gap: 0;
+      grid-template-rows: 52px 1fr 56px;
       grid-template-columns: 1fr;
       grid-template-areas:
         "header"
-        "main"
-        "right";
+        "content"
+        "mobile-nav";
     }
-    header { border-radius: 14px; }
+    header {
+      border-radius: 0;
+      border-left: none;
+      border-right: none;
+      border-top: none;
+    }
+    aside { display: none; }
     .status-bar { display: none; }
-    #chat-messages,
-    #main-content { padding: 14px; }
-    .chat-input-area,
-    .mission-bar { padding: 10px; }
+
+    /* Both panels share the content cell; JS toggles which is visible */
+    main        { grid-area: content; border-radius: 0; }
+    .right-panel { grid-area: content; display: none; border-radius: 0; }
+    body.mob-ctx main        { display: none; }
+    body.mob-ctx .right-panel { display: flex;  }
+
+    /* Sidebar drawer — slides in from left over content */
+    body.mob-menu aside {
+      display: flex;
+      position: fixed;
+      top: 52px; left: 0; bottom: 56px;
+      width: min(300px, 85vw);
+      z-index: 500;
+      box-shadow: 4px 0 24px rgba(0,0,0,0.18);
+      overflow-y: auto;
+      border-right: 1px solid var(--line);
+    }
+
+    /* Hide desktop resize handle on mobile */
+    #right-panel-resize-handle { display: none !important; }
+
+    /* Prevent iOS auto-zoom on input focus (requires ≥16px) */
+    #chat-input, input[type="text"], input[type="password"],
+    input[type="email"], input[type="number"], textarea {
+      font-size: 16px !important;
+    }
+
+    #chat-messages, #main-content { padding: 12px; }
+    .chat-input-area, .mission-bar { padding: 8px 10px; }
+
+    /* Show mobile bottom nav */
+    #mobile-nav { display: flex !important; }
   }
+  /* --- Mobile Bottom Nav ---------------------------- */
+  #mobile-nav {
+    display: none;
+    grid-area: mobile-nav;
+    align-items: stretch;
+    background: var(--panel);
+    border-top: 1px solid var(--line);
+  }
+  .mob-tab {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 3px;
+    border: none;
+    background: transparent;
+    color: var(--muted);
+    font-family: 'Manrope', sans-serif;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    cursor: pointer;
+    padding: 6px 4px;
+    border-top: 2px solid transparent;
+    transition: color 0.15s, border-color 0.15s;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .mob-tab.active { color: var(--brand); border-top-color: var(--brand); }
+  .mob-tab svg { width: 20px; height: 20px; stroke-width: 2; }
   /* --- Heartbeat Page ------------------------------- */
   #heartbeat-view {
     display: none;
@@ -2399,6 +2464,8 @@
 
 <!-- RIGHT PANEL -->
   <div class="right-panel" id="right-panel" style="position:relative">
+  <!-- Resize handle on left edge -->
+  <div id="right-panel-resize-handle" style="position:absolute;left:0;top:0;bottom:0;width:5px;cursor:col-resize;z-index:200;background:transparent;transition:background 0.15s ease" title="Drag to resize"></div>
   <!-- Right panel topbar with canvas toggle -->
   <div style="display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-bottom:1px solid var(--line);flex-shrink:0;background:var(--panel);min-height:38px">
     <span style="font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:0.06em">Context</span>
@@ -2574,6 +2641,25 @@
   </div>
 </div>
 
+<!-- MOBILE BOTTOM NAV -->
+<nav id="mobile-nav">
+  <button id="mob-tab-chat" class="mob-tab active" onclick="mobTab('chat')">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+    Chat
+  </button>
+  <button id="mob-tab-ctx" class="mob-tab" onclick="mobTab('ctx')">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
+    Context
+  </button>
+  <button id="mob-tab-menu" class="mob-tab" onclick="mobTab('menu')">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+    Menu
+  </button>
+</nav>
+
+<!-- Mobile backdrop (closes sidebar drawer) -->
+<div id="mob-backdrop" onclick="mobCloseMenu()" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.38);z-index:499;-webkit-tap-highlight-color:transparent"></div>
+
 <!-- ERROR RESPONSE MODAL -->
 <div id="error-response-panel">
   <div class="error-response-header">
@@ -9590,6 +9676,103 @@ async function submitErrorResponse() {
   }
 })();
 
+// ── Mobile tab navigation ───────────────────────────────────────────────────
+function mobTab(tab) {
+  const body = document.body;
+
+  if (tab === 'menu') {
+    const isOpen = body.classList.contains('mob-menu');
+    if (isOpen) {
+      mobCloseMenu();
+    } else {
+      body.classList.add('mob-menu');
+      document.getElementById('mob-backdrop').style.display = 'block';
+    }
+    // Keep chat/ctx tab highlight unchanged; toggle menu highlight
+    document.getElementById('mob-tab-menu').classList.toggle('active', !isOpen);
+    return;
+  }
+
+  mobCloseMenu();
+  ['chat', 'ctx', 'menu'].forEach(t =>
+    document.getElementById('mob-tab-' + t)?.classList.toggle('active', t === tab)
+  );
+
+  if (tab === 'ctx') {
+    body.classList.add('mob-ctx');
+  } else {
+    body.classList.remove('mob-ctx');
+  }
+}
+
+function mobCloseMenu() {
+  document.body.classList.remove('mob-menu');
+  document.getElementById('mob-backdrop').style.display = 'none';
+  document.getElementById('mob-tab-menu')?.classList.remove('active');
+}
+
+// ── Right-panel resize ──────────────────────────────────────────────────────
+(function initRightPanelResize() {
+  const MIN_W = 280;
+  const MAX_W_RATIO = 0.65;
+  const STORE_KEY = 'rightPanelWidth';
+
+  function applyWidth(px) {
+    document.body.style.gridTemplateColumns = `280px 1fr ${px}px`;
+  }
+
+  function clamp(px) {
+    return Math.max(MIN_W, Math.min(Math.floor(window.innerWidth * MAX_W_RATIO), px));
+  }
+
+  // Restore saved width
+  const saved = parseInt(localStorage.getItem(STORE_KEY), 10);
+  if (saved && saved >= MIN_W) applyWidth(clamp(saved));
+
+  function setup() {
+    const handle = document.getElementById('right-panel-resize-handle');
+    const panel  = document.getElementById('right-panel');
+    if (!handle || !panel) return;
+
+    handle.addEventListener('mouseenter', () => { handle.style.background = 'var(--brand, #1668e3)'; handle.style.opacity = '0.35'; });
+    handle.addEventListener('mouseleave', () => { handle.style.background = 'transparent'; handle.style.opacity = '1'; });
+
+    handle.addEventListener('mousedown', (e) => {
+      e.preventDefault();
+      const startX = e.clientX;
+      const startW = panel.getBoundingClientRect().width;
+
+      // Prevent iframes from swallowing events during drag
+      document.querySelectorAll('iframe').forEach(f => f.style.pointerEvents = 'none');
+      document.body.style.userSelect = 'none';
+      handle.style.background = 'var(--brand, #1668e3)';
+      handle.style.opacity = '0.6';
+
+      function onMove(ev) {
+        const newW = clamp(startW + (startX - ev.clientX));
+        applyWidth(newW);
+      }
+
+      function onUp() {
+        document.removeEventListener('mousemove', onMove);
+        document.removeEventListener('mouseup', onUp);
+        document.querySelectorAll('iframe').forEach(f => f.style.pointerEvents = '');
+        document.body.style.userSelect = '';
+        handle.style.background = 'transparent';
+        handle.style.opacity = '1';
+        const finalW = panel.getBoundingClientRect().width;
+        localStorage.setItem(STORE_KEY, Math.round(finalW));
+      }
+
+      document.addEventListener('mousemove', onMove);
+      document.addEventListener('mouseup', onUp);
+    });
+  }
+
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', setup);
+  else setup();
+})();
+
 function handleErrorResponseWsEvent(e) {
   const msg = e.detail || e;
   if (!msg || msg.type !== 'task_error_requires_response') return;

workspace/SOUL.md

@@ -21,11 +21,12 @@
 
 ## pptx_workflow
 1. Call `create_presentation` ONCE with ALL slides in a single spec. The tool auto-creates the project folder from the title.
-2. For slide images, put `image_url` directly on each slide spec — the Python engine downloads it automatically into the project folder.
-3. If image_url fails, try `image_path` pointing to an existing local file (relative to workspace, e.g. `"uploads/photo.jpg"`).
-4. Slide type field is `type` — valid values: `"title"`, `"content"`, `"section"`, `"image"`, `"blank"`. Do NOT use `layout`.
-5. Do NOT write Python scripts to download images. Do NOT call shell repeatedly to download images before create_presentation. Just put `image_url` in the slide spec.
-6. Engine is always python-pptx. Output: `[Title](/api/files/<folder>/<filename>.pptx)`.
+2. For slide images, use `image_search` with a concise English keyword (e.g. `"golden retriever puppy"`, `"modern office meeting"`). Pexels/Unsplash APIs download the image automatically — no manual download needed.
+3. Use `image_url` ONLY when the user provides a specific URL. Do NOT invent image URLs.
+4. Use `image_path` ONLY for files already in the workspace (e.g. `"uploads/photo.jpg"`).
+5. Slide type field is `type` — valid values: `"title"`, `"content"`, `"section"`, `"image"`, `"blank"`. Do NOT use `layout`.
+6. Do NOT write Python scripts to download images. Do NOT call shell to download images before create_presentation.
+7. Engine is always python-pptx. Output: `[Title](/api/files/<folder>/<filename>.pptx)`.
 
 ## identity_sync
 - Sync critical fields IDENTITY.md ↔ SOUL.md when name/role/mode changes. Hash last block for sanity checks.

workspace/강아지_품종_가이드_수정본/download.html

@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-    <meta charset="UTF-8">
-    <title>강아지 품종 가이드 (수정본) - 다운로드</title>
-    <style>
-        body { font-family: 'Malgun Gothic', sans-serif; max-width: 600px; margin: 60px auto; padding: 20px; text-align: center; background: #f8f9fa; }
-        .card { background: white; border-radius: 12px; padding: 40px 30px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
-        h1 { color: #1a1a2e; font-size: 24px; margin-bottom: 10px; }
-        p { color: #5f6f86; margin-bottom: 30px; }
-        .btn { display: inline-block; background: #1668e3; color: white; text-decoration: none; padding: 14px 36px; border-radius: 8px; font-size: 16px; font-weight: bold; transition: background 0.2s; }
-        .btn:hover { background: #1255bb; }
-        .meta { margin-top: 20px; font-size: 12px; color: #888; }
-    </style>
-</head>
-<body>
-    <div class="card">
-        <h1>강아지 품종 가이드 (수정본)</h1>
-        <p>슬라이드 6장이 준비되었습니다.</p>
-        <a class="btn" href="강아지_품종_가이드_수정본.pptx" download>프레젠테이션 다운로드</a>
-        <div class="meta">D:\homeclaw\workspace\강아지_품종_가이드_수정본\강아지_품종_가이드_수정본.pptx</div>
-    </div>
-</body>
-</html>

workspace/강아지_품종_소개/download.html

@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-    <meta charset="UTF-8">
-    <title>강아지 품종 소개 - 다운로드</title>
-    <style>
-        body { font-family: 'Malgun Gothic', sans-serif; max-width: 600px; margin: 60px auto; padding: 20px; text-align: center; background: #f8f9fa; }
-        .card { background: white; border-radius: 12px; padding: 40px 30px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
-        h1 { color: #1a1a2e; font-size: 24px; margin-bottom: 10px; }
-        p { color: #5f6f86; margin-bottom: 30px; }
-        .btn { display: inline-block; background: #1668e3; color: white; text-decoration: none; padding: 14px 36px; border-radius: 8px; font-size: 16px; font-weight: bold; transition: background 0.2s; }
-        .btn:hover { background: #1255bb; }
-        .meta { margin-top: 20px; font-size: 12px; color: #888; }
-    </style>
-</head>
-<body>
-    <div class="card">
-        <h1>강아지 품종 소개</h1>
-        <p>슬라이드 6장이 준비되었습니다.</p>
-        <a class="btn" href="강아지_품종_소개_v2.pptx" download>프레젠테이션 다운로드</a>
-        <div class="meta">D:\homeclaw\workspace\강아지_품종_소개\강아지_품종_소개_v2.pptx</div>
-    </div>
-</body>
-</html>

workspace/강아지_품종_소개_v4/download.html

@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-    <meta charset="UTF-8">
-    <title>강아지 품종 소개 v4 - 다운로드</title>
-    <style>
-        body { font-family: 'Malgun Gothic', sans-serif; max-width: 600px; margin: 60px auto; padding: 20px; text-align: center; background: #f8f9fa; }
-        .card { background: white; border-radius: 12px; padding: 40px 30px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
-        h1 { color: #1a1a2e; font-size: 24px; margin-bottom: 10px; }
-        p { color: #5f6f86; margin-bottom: 30px; }
-        .btn { display: inline-block; background: #1668e3; color: white; text-decoration: none; padding: 14px 36px; border-radius: 8px; font-size: 16px; font-weight: bold; transition: background 0.2s; }
-        .btn:hover { background: #1255bb; }
-        .meta { margin-top: 20px; font-size: 12px; color: #888; }
-    </style>
-</head>
-<body>
-    <div class="card">
-        <h1>강아지 품종 소개 v4</h1>
-        <p>슬라이드 6장이 준비되었습니다.</p>
-        <a class="btn" href="강아지_품종_소개_v4.pptx" download>프레젠테이션 다운로드</a>
-        <div class="meta">D:\homeclaw\workspace\강아지_품종_소개_v4\강아지_품종_소개_v4.pptx</div>
-    </div>
-</body>
-</html>

workspace/고양이_품종_소개/download.html

@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-    <meta charset="UTF-8">
-    <title>고양이 품종 소개 - 다운로드</title>
-    <style>
-        body { font-family: 'Malgun Gothic', sans-serif; max-width: 600px; margin: 60px auto; padding: 20px; text-align: center; background: #f8f9fa; }
-        .card { background: white; border-radius: 12px; padding: 40px 30px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
-        h1 { color: #1a1a2e; font-size: 24px; margin-bottom: 10px; }
-        p { color: #5f6f86; margin-bottom: 30px; }
-        .btn { display: inline-block; background: #1668e3; color: white; text-decoration: none; padding: 14px 36px; border-radius: 8px; font-size: 16px; font-weight: bold; transition: background 0.2s; }
-        .btn:hover { background: #1255bb; }
-        .meta { margin-top: 20px; font-size: 12px; color: #888; }
-    </style>
-</head>
-<body>
-    <div class="card">
-        <h1>고양이 품종 소개</h1>
-        <p>슬라이드 6장이 준비되었습니다.</p>
-        <a class="btn" href="고양이_품종_소개.pptx" download>프레젠테이션 다운로드</a>
-        <div class="meta">D:\homeclaw\workspace\고양이_품종_소개\고양이_품종_소개.pptx</div>
-    </div>
-</body>
-</html>

workspace/고양이_품종_소개_확장판/download.html

@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-    <meta charset="UTF-8">
-    <title>고양이 품종 소개 확장판 - 다운로드</title>
-    <style>
-        body { font-family: 'Malgun Gothic', sans-serif; max-width: 600px; margin: 60px auto; padding: 20px; text-align: center; background: #f8f9fa; }
-        .card { background: white; border-radius: 12px; padding: 40px 30px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
-        h1 { color: #1a1a2e; font-size: 24px; margin-bottom: 10px; }
-        p { color: #5f6f86; margin-bottom: 30px; }
-        .btn { display: inline-block; background: #1668e3; color: white; text-decoration: none; padding: 14px 36px; border-radius: 8px; font-size: 16px; font-weight: bold; transition: background 0.2s; }
-        .btn:hover { background: #1255bb; }
-        .meta { margin-top: 20px; font-size: 12px; color: #888; }
-    </style>
-</head>
-<body>
-    <div class="card">
-        <h1>고양이 품종 소개 확장판</h1>
-        <p>슬라이드 6장이 준비되었습니다.</p>
-        <a class="btn" href="고양이_품종_소개_확장판.pptx" download>프레젠테이션 다운로드</a>
-        <div class="meta">D:\homeclaw\workspace\고양이_품종_소개_확장판\고양이_품종_소개_확장판.pptx</div>
-    </div>
-</body>
-</html>

workspace/소나무_종류_소개/download.html

@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-    <meta charset="UTF-8">
-    <title>소나무 종류 소개 - 다운로드</title>
-    <style>
-        body { font-family: 'Malgun Gothic', sans-serif; max-width: 600px; margin: 60px auto; padding: 20px; text-align: center; background: #f8f9fa; }
-        .card { background: white; border-radius: 12px; padding: 40px 30px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
-        h1 { color: #1a1a2e; font-size: 24px; margin-bottom: 10px; }
-        p { color: #5f6f86; margin-bottom: 30px; }
-        .btn { display: inline-block; background: #1668e3; color: white; text-decoration: none; padding: 14px 36px; border-radius: 8px; font-size: 16px; font-weight: bold; transition: background 0.2s; }
-        .btn:hover { background: #1255bb; }
-        .meta { margin-top: 20px; font-size: 12px; color: #888; }
-    </style>
-</head>
-<body>
-    <div class="card">
-        <h1>소나무 종류 소개</h1>
-        <p>슬라이드 6장이 준비되었습니다.</p>
-        <a class="btn" href="소나무_종류_소개.pptx" download>프레젠테이션 다운로드</a>
-        <div class="meta">D:\homeclaw\workspace\소나무_종류_소개\소나무_종류_소개.pptx</div>
-    </div>
-</body>
-</html>

workspace/양_품종_소개_presentation/download.html

@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html lang="ko">
-<head>
-    <meta charset="UTF-8">
-    <title>양 품종 소개 presentation - 다운로드</title>
-    <style>
-        body { font-family: 'Malgun Gothic', sans-serif; max-width: 600px; margin: 60px auto; padding: 20px; text-align: center; background: #f8f9fa; }
-        .card { background: white; border-radius: 12px; padding: 40px 30px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
-        h1 { color: #1a1a2e; font-size: 24px; margin-bottom: 10px; }
-        p { color: #5f6f86; margin-bottom: 30px; }
-        .btn { display: inline-block; background: #1668e3; color: white; text-decoration: none; padding: 14px 36px; border-radius: 8px; font-size: 16px; font-weight: bold; transition: background 0.2s; }
-        .btn:hover { background: #1255bb; }
-        .meta { margin-top: 20px; font-size: 12px; color: #888; }
-    </style>
-</head>
-<body>
-    <div class="card">
-        <h1>양 품종 소개 presentation</h1>
-        <p>슬라이드 6장이 준비되었습니다.</p>
-        <a class="btn" href="양_품종_소개_presentation.pptx" download>프레젠테이션 다운로드</a>
-        <div class="meta">D:\homeclaw\workspace\양_품종_소개_presentation\양_품종_소개_presentation.pptx</div>
-    </div>
-</body>
-</html>