Update public/index.html

public/index.html

@@ -148,26 +148,27 @@ header{
 .cmd-block{
   background:var(--bg);border:1px solid var(--border);border-radius:var(--r);
   font-family:var(--mono);font-size:12px;overflow:hidden;animation:fadein .2s ease;
-  max-width:100%;
+  max-width:100%;width:100%;
 }
 .cmd-block.error-block{border-color:rgba(239,68,68,.4);}
 .cmd-head{
-  display:flex;align-items:center;gap:8px;
-  padding:8px 12px;background:var(--bg2);border-bottom:1px solid var(--border);
+  display:flex;align-items:flex-start;gap:8px;
+  padding:9px 12px;background:var(--bg2);border-bottom:1px solid var(--border);
+  min-height:38px;
 }
 .cmd-head.err-head{background:rgba(239,68,68,.06);}
-.cmd-prompt{color:var(--green);font-weight:600;flex-shrink:0;}
+.cmd-prompt{color:var(--green);font-weight:600;flex-shrink:0;padding-top:1px;}
 .cmd-prompt.err{color:var(--red);}
-.cmd-txt{color:var(--text2);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;}
+.cmd-txt{color:var(--text2);flex:1;white-space:pre-wrap;word-break:break-all;font-size:12px;line-height:1.5;}
 .cmd-badge{
   padding:2px 7px;border-radius:4px;font-size:10px;font-weight:600;
   background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);color:var(--green);
-  flex-shrink:0;
+  flex-shrink:0;margin-top:1px;
 }
 .cmd-badge.running{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3);color:var(--yellow);}
 .cmd-badge.err-badge{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3);color:var(--red);}
 .cmd-out{
-  padding:8px 12px;color:var(--text3);max-height:120px;overflow-y:auto;
+  padding:8px 12px;color:var(--text3);max-height:160px;overflow-y:auto;
   line-height:1.6;white-space:pre-wrap;word-break:break-all;font-size:11px;
 }
 .cmd-out.err-out{color:var(--red);}
@@ -430,7 +431,7 @@ header{
 <!-- HEADER -->
 <header>
   <div class="logo">
-    <span class="logo-ice">❄️</span>
+    <span class="logo-ice"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:#7dd3fc"><line x1="12" y1="2" x2="12" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/><line x1="19.07" y1="4.93" x2="4.93" y2="19.07"/><circle cx="12" cy="12" r="2" fill="#7dd3fc" stroke="none"/></svg></span>
     Cryo<span>Dev</span>
   </div>
   <div class="h-spacer"></div>
@@ -454,7 +455,7 @@ header{
   <div class="chat-side">
     <div class="msgs" id="msgs">
       <div class="welcome" id="welcome">
-        <div class="w-icon">❄️</div>
+        <div class="w-icon"><svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#7dd3fc" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="2" x2="12" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/><line x1="19.07" y1="4.93" x2="4.93" y2="19.07"/><circle cx="12" cy="12" r="2.5" fill="#7dd3fc" stroke="none"/><circle cx="12" cy="2" r="1.5" fill="#7dd3fc" stroke="none"/><circle cx="12" cy="22" r="1.5" fill="#7dd3fc" stroke="none"/><circle cx="2" cy="12" r="1.5" fill="#7dd3fc" stroke="none"/><circle cx="22" cy="12" r="1.5" fill="#7dd3fc" stroke="none"/></svg></div>
         <div class="w-title">Cryo Dev</div>
         <div class="w-sub">AI-powered code editor. Ask me to create, edit, or explain code — or search the web.</div>
         <div class="tips">
@@ -481,7 +482,7 @@ header{
     <!-- INPUT AREA -->
     <div class="input-area">
       <div class="ctx-row">
-        <div class="ctx-badge">📄 <span id="ctxFile">No file</span></div>
+      <div class="ctx-badge"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg> <span id="ctxFile">No file</span></div>
         <div class="ctx-actions">
           <button class="ctx-icon-btn" onclick="openSheet('tasksSheet')" id="taskCountBtn">Tasks</button>
           <button class="ctx-icon-btn" onclick="openSheet('versionsSheet')" id="versionsBtn" style="display:none">Versions</button>
@@ -522,26 +523,25 @@ header{
 
 </div>
 
-<!-- BOTTOM NAV (mobile only) -->
 <div class="bottom-nav">
   <button class="nav-btn active" onclick="closeAllSheets()" id="navChat">
-    <span class="nav-icon">💬</span>
+    <span class="nav-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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></span>
     <span class="nav-label">Chat</span>
   </button>
   <button class="nav-btn" onclick="openSheet('filesSheet')" id="navFiles">
-    <span class="nav-icon">📁</span>
+    <span class="nav-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg></span>
     <span class="nav-label">Files</span>
   </button>
   <button class="nav-btn" onclick="openSheet('tasksSheet')" id="navTasks">
-    <span class="nav-icon">✅</span>
+    <span class="nav-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg></span>
     <span class="nav-label">Tasks</span>
   </button>
   <button class="nav-btn" onclick="openSheet('codeSheet')" id="navCode">
-    <span class="nav-icon">{ }</span>
+    <span class="nav-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg></span>
     <span class="nav-label">Code</span>
   </button>
   <button class="nav-btn" onclick="openSheet('histSheet')" id="navHist">
-    <span class="nav-icon">⌨️</span>
+    <span class="nav-icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg></span>
     <span class="nav-label">History</span>
   </button>
 </div>
@@ -588,8 +588,8 @@ header{
   </div>
   <div class="sheet-body">
     <div class="code-acts">
-      <button class="btn-act" onclick="copyCode()">⎘ Copy</button>
-      <a class="btn-act" id="dlBtn">↓ Download</a>
+      <button class="btn-act" onclick="copyCode()"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg> Copy</button>
+      <a class="btn-act" id="dlBtn"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> Download</a>
     </div>
     <div class="code-viewer" id="codeViewer">No file open</div>
   </div>
@@ -674,7 +674,7 @@ async function loadTree() {
 
 function renderItems(items, depth = 0) {
   return items.map(it => {
-    const icon = it.type === "dir" ? "📁" : fileIcon(it.name);
+    const icon = it.type === "dir" ? dirIcon() : fileIcon(it.name);
     const active = curFile === it.path ? "active" : "";
     const size = it.size ? fmtSize(it.size) : "";
     return `
@@ -694,7 +694,12 @@ function renderItems(items, depth = 0) {
 
 function fileIcon(n) {
   const e = n.split(".").pop().toLowerCase();
-  return {js:"🟨",ts:"🔷",py:"🐍",sh:"⚙️",json:"📋",html:"🌐",css:"🎨",md:"📝",txt:"📄",env:"🔑"}[e] || "📄";
+  const color = {js:"#f7df1e",ts:"#3178c6",py:"#3572a5",sh:"#89e051",json:"#cbcb41",html:"#e34c26",css:"#563d7c",md:"#083fa1",txt:"#888",env:"#f59e0b"}[e] || "#888";
+  return `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>`;
+}
+
+function dirIcon() {
+  return `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>`;
 }
 function fmtSize(b) {
   if (b < 1024) return b + "B";
@@ -718,7 +723,10 @@ function renderTasks(tasks) {
 
   const html = tasks.length ? tasks.map(t => `
     <div class="task-item">
-      <span class="task-check">${t.done ? "✅" : "⬜"}</span>
+      <span class="task-check">${t.done
+        ? `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`
+        : `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>`
+      }</span>
       <span class="task-text ${t.done ? "done" : ""}">${esc(t.task)}</span>
     </div>`).join("") : '<div style="color:var(--text3);font-size:13px">No tasks yet</div>';
 
@@ -975,7 +983,7 @@ function handleEvent(ev) {
       el.id = "ws-block";
       el.innerHTML = `
         <div class="ws-head">
-          <span>🔍</span>
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
           <span class="ws-query">Searching: ${esc(ev.query)}</span>
         </div>
         <div class="ws-citations" id="ws-citations"><div style="color:var(--text3);font-size:12px;padding:4px 0">Fetching results...</div></div>`;
@@ -1009,8 +1017,12 @@ function handleEvent(ev) {
 
       const el = document.createElement("div");
       el.className = "file-banner";
+      const isCreate = ev.type === "file_created";
       el.innerHTML = `
-        <span class="fb-icon">${ev.type === "file_created" ? "✨" : "✏️"}</span>
+        <span class="fb-icon">${isCreate
+          ? `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="18" x2="12" y2="12"/><line x1="9" y1="15" x2="15" y2="15"/></svg>`
+          : `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>`
+        }</span>
         <div class="fb-info">
           <div class="fb-name">${esc(ev.filename)}</div>
           <div class="fb-desc">${esc(ev.description || "")}</div>
@@ -1033,7 +1045,7 @@ function handleEvent(ev) {
       const el = document.createElement("div");
       el.className = "pending-banner";
       el.innerHTML = `
-        <div class="pb-title">⬜ ${tasks.length} task${tasks.length > 1 ? "s" : ""} pending</div>
+        <div class="pb-title"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:middle;margin-right:4px"><rect x="3" y="3" width="18" height="18" rx="2"/></svg> ${tasks.length} task${tasks.length > 1 ? "s" : ""} pending</div>
         <ul class="pb-list">${tasks.map(t => `<li>${esc(t.task)}</li>`).join("")}</ul>
         <button class="resume-btn" onclick="resumeTasks()">Resume pending tasks →</button>`;
       msgs.appendChild(el);
@@ -1074,7 +1086,7 @@ function appendAI(text) {
   const el = document.createElement("div");
   el.className = "msg msg-ai";
   const fmt = esc(text).replace(/`([^`]+)`/g, "<code>$1</code>");
-  el.innerHTML = `<div class="msg-label">❄️ Cryo</div><div class="bubble">${fmt}</div>`;
+  el.innerHTML = `<div class="msg-label"><svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#7dd3fc" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="display:inline;vertical-align:middle;margin-right:3px"><line x1="12" y1="2" x2="12" y2="22"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/><line x1="19.07" y1="4.93" x2="4.93" y2="19.07"/></svg> Cryo</div><div class="bubble">${fmt}</div>`;
   msgs.appendChild(el);
   scrollBot();
 }