Update app.py

app.py

@@ -19,24 +19,18 @@ HTML_APP = """
     -webkit-background-clip: text; -webkit-text-fill-color: transparent;
     margin: 0 0 6px;
   }
-  #planner-root .sub {
-    text-align: center; color: #718096;
-    font-size: 0.88rem; margin-bottom: 28px;
-  }
+  .sub { text-align: center; color: #718096; font-size: 0.88rem; margin-bottom: 28px; }
+
   .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
   @media(max-width:560px){ .row { grid-template-columns: 1fr; } }
 
-  .field label {
-    display: block; font-size: 0.85rem; font-weight: 600;
-    color: #4a5568; margin-bottom: 6px;
-  }
+  .field label { display: block; font-size: 0.85rem; font-weight: 600; color: #4a5568; margin-bottom: 6px; }
   .field textarea, .field input {
-    width: 100%; background: #ffffff;
+    width: 100%; background: #fff;
     border: 1px solid #cbd5e0; border-radius: 8px;
     color: #1a202c; font-family: 'Vazirmatn', sans-serif;
     font-size: 0.95rem; padding: 10px 12px;
-    transition: border-color .2s, box-shadow .2s;
-    resize: vertical;
+    transition: border-color .2s, box-shadow .2s; resize: vertical;
   }
   .field textarea { min-height: 80px; }
   .field input[type=password] { height: 44px; }
@@ -49,46 +43,72 @@ HTML_APP = """
     width: 100%; padding: 13px;
     background: linear-gradient(135deg, #667eea, #764ba2);
     border: none; border-radius: 8px; color: #fff;
-    font-family: 'Vazirmatn', sans-serif;
-    font-weight: 700; font-size: 1.05rem;
+    font-family: 'Vazirmatn', sans-serif; font-weight: 700; font-size: 1.05rem;
     cursor: pointer; margin-bottom: 24px;
-    box-shadow: 0 4px 18px rgba(102,126,234,.35);
-    transition: all .2s;
+    box-shadow: 0 4px 18px rgba(102,126,234,.35); transition: all .2s;
   }
   #startBtn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
   #startBtn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
 
+  /* Step cards */
   .step {
-    border-radius: 10px; margin: 10px 0;
-    border: 1px solid #e2e8f0; overflow: hidden;
-    transition: border-color .3s, box-shadow .3s;
-    background: #ffffff;
-  }
-  .step.s-pending { opacity: .45; }
-  .step.s-active  { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,.12); }
-  .step.s-done    { border-color: #48bb78; }
+    border-radius: 12px; margin: 10px 0;
+    border: 1px solid #e2e8f0; background: #fff;
+    overflow: hidden; transition: border-color .3s, box-shadow .3s;
+  }
+  .step.s-pending { opacity: .4; }
+  .step.s-active  { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,.1); }
+  .step.s-done    { border-color: #68d391; }
   .step.s-error   { border-color: #fc8181; }
 
   .step-hd {
     display: flex; align-items: center; gap: 10px;
-    padding: 12px 16px; font-weight: 600; font-size: .93rem;
-    background: #f7fafc; color: #2d3748;
-    border-bottom: 1px solid #e2e8f0;
+    padding: 13px 16px; font-weight: 700; font-size: .92rem;
+    background: #f7fafc; color: #2d3748; border-bottom: 1px solid #e2e8f0;
+    cursor: pointer; user-select: none;
+  }
+  .step.s-active .step-hd { background: #ebf4ff; color: #3c5fb8; border-color: #bee3f8; }
+  .step.s-done   .step-hd { background: #f0fff4; color: #276749; border-color: #c6f6d5; }
+  .step.s-error  .step-hd { background: #fff5f5; color: #c53030; border-color: #fed7d7; }
+
+  .step-hd .badge {
+    margin-right: auto; /* push to left in rtl */
+    font-size: .75rem; font-weight: 600; padding: 2px 10px;
+    border-radius: 20px; background: rgba(0,0,0,.06); color: inherit;
+    white-space: nowrap;
   }
-  .step.s-active .step-hd  { background: #ebf4ff; color: #3c5fb8; border-color: #bee3f8; }
-  .step.s-done   .step-hd  { background: #f0fff4; color: #276749; border-color: #c6f6d5; }
-  .step.s-error  .step-hd  { background: #fff5f5; color: #c53030; border-color: #fed7d7; }
+  .step.s-active .badge { background: rgba(102,126,234,.15); }
+  .step.s-done   .badge { background: rgba(72,187,120,.15); }
 
   .step-body {
-    padding: 14px 16px; font-size: .88rem; line-height: 1.85;
-    background: #ffffff; color: #2d3748;
-    white-space: pre-wrap; display: none;
+    padding: 0; max-height: 0; overflow: hidden;
+    transition: max-height .4s ease, padding .3s;
   }
   .step.s-active .step-body,
   .step.s-done   .step-body,
-  .step.s-error  .step-body { display: block; }
-  .step.s-active .step-body { color: #a0aec0; font-style: italic; }
-  .step.s-error  .step-body { color: #c53030; }
+  .step.s-error  .step-body {
+    max-height: 600px; padding: 14px 16px;
+  }
+
+  /* Items inside step body */
+  .item {
+    display: flex; gap: 10px; align-items: flex-start;
+    padding: 8px 10px; border-radius: 8px; margin-bottom: 6px;
+    background: #f7fafc; font-size: .88rem; line-height: 1.7; color: #2d3748;
+  }
+  .item:last-child { margin-bottom: 0; }
+  .item .num {
+    min-width: 24px; height: 24px; border-radius: 50%;
+    background: #667eea; color: white;
+    font-size: .75rem; font-weight: 700;
+    display: flex; align-items: center; justify-content: center; margin-top: 1px;
+  }
+  .step.s-done .item .num { background: #48bb78; }
+
+  .thinking {
+    color: #a0aec0; font-style: italic; font-size: .88rem;
+    padding: 6px 4px;
+  }
 
   @keyframes spin { to { transform: rotate(360deg); } }
   .spin-icon { display: inline-block; animation: spin 1s linear infinite; }
@@ -102,8 +122,7 @@ HTML_APP = """
   #errBox {
     background: #fff5f5; border: 1px solid #fc8181;
     color: #c53030; padding: 12px 16px; border-radius: 8px;
-    font-weight: 600; margin-bottom: 14px; display: none;
-    font-size: .9rem;
+    font-weight: 600; margin-bottom: 14px; display: none; font-size: .9rem;
   }
 </style>
 
@@ -133,31 +152,78 @@ HTML_APP = """
 const STEPS = [
   {
     id: "s1",
-    title: "مرحله ۱ — تجزیه هدف به زیروظایف",
-    prompt: (c) => "Break this goal into exactly 5 clear sub-tasks. Output ONLY a numbered list, no other text.\\n\\nGoal: " + c.goal
+    title: "تجزیه هدف",
+    emoji: "🔍",
+    badge: "زیروظایف",
+    prompt: (c) => `هدف زیر را به فارسی به دقیقاً ۵ زیروظیفه کوتاه و واضح تقسیم کن.
+فقط یک لیست شماره‌گذاری شده بنویس. هر آیتم حداکثر ۱۵ کلمه باشد. بدون توضیح اضافه.
+
+هدف: ${c.goal}`
   },
   {
     id: "s2",
-    title: "مرحله ۲ — تحلیل وابستگی‌ها و ریسک‌ها",
-    prompt: (c) => "For each sub-task, write one line: N. [task] | dependency: X | risk: Y | resource: Z\\n\\nSub-tasks:\\n" + c.s1
+    title: "تحلیل ریسک‌ها",
+    emoji: "🧠",
+    badge: "وابستگی‌ها",
+    prompt: (c) => `برای هر زیروظیفه زیر، یک خط فارسی بنویس با این فرمت:
+شماره. [زیروظیفه] ← وابستگی: ... | ریسک: ... | منبع: ...
+فقط همین فرمت، بدون توضیح اضافه.
+
+زیروظایف:
+${c.s1}`
   },
   {
     id: "s3",
-    title: "مرحله ۳ — اولویت‌بندی و زمان‌بندی",
-    prompt: (c) => "Create an optimized execution order with time estimates (Day 1, Day 2 etc).\\n\\nAnalysis:\\n" + c.s2
+    title: "اولویت‌بندی",
+    emoji: "📅",
+    badge: "زمان‌بندی",
+    prompt: (c) => `بر اساس تحلیل زیر، یک برنامه زمانی فارسی بنویس.
+فرمت: روز X — وظیفه: ... | زمان: ... ساعت
+فقط برنامه روزانه، بدون توضیح اضافه. حداکثر ۶ خط.
+
+تحلیل:
+${c.s2}`
   },
   {
     id: "s4",
-    title: "مرحله ۴ — اقدامات عملی",
-    prompt: (c) => "Convert each step into 2-3 concrete actions with a success criteria.\\n\\nPlan:\\n" + c.s3
+    title: "اقدامات عملی",
+    emoji: "⚙️",
+    badge: "گام‌های اجرایی",
+    prompt: (c) => `برای هر روز از برنامه زیر، ۲ اقدام عملی فارسی بنویس.
+فرمت: روز X: اقدام ۱ / اقدام ۲
+خلاصه، عملی و قابل اجرا. بدون توضیح اضافه.
+
+برنامه:
+${c.s3}`
   },
   {
     id: "s5",
-    title: "مرحله ۵ — خلاصه اجرایی نهایی",
-    prompt: (c) => "Write a 3-4 sentence executive summary of this complete plan.\\n\\nFull plan:\\n" + c.s4
+    title: "خلاصه نهایی",
+    emoji: "✅",
+    badge: "نتیجه‌گیری",
+    prompt: (c) => `یک خلاصه اجرایی فارسی ۳ جمله‌ای از این برنامه کامل بنویس.
+جمله ۱: هدف اصلی
+جمله ۲: مسیر اجرا
+جمله ۳: نکته کلیدی موفقیت
+
+برنامه کامل:
+${c.s4}`
   }
 ];
 
+// Parse numbered list into array of strings
+function parseList(text) {
+  return text.split('\\n')
+    .map(l => l.replace(/^\\d+[\\.\\-\\)]\\.?\\s*/, '').trim())
+    .filter(l => l.length > 5);
+}
+
+function renderItems(lines) {
+  return lines.map((line, i) =>
+    `<div class="item"><span class="num">${i+1}</span><span>${line}</span></div>`
+  ).join('');
+}
+
 function buildSteps() {
   const area = document.getElementById("stepsArea");
   area.innerHTML = "";
@@ -165,24 +231,41 @@ function buildSteps() {
     const d = document.createElement("div");
     d.className = "step s-pending";
     d.id = "step-" + i;
-    d.innerHTML = `<div class="step-hd"><span>⬜</span>&nbsp;${s.title}</div><div class="step-body"></div>`;
+    d.innerHTML = `
+      <div class="step-hd">
+        <span>${s.emoji}</span>
+        <span>مرحله ${i+1} — ${s.title}</span>
+        <span class="badge">${s.badge}</span>
+      </div>
+      <div class="step-body"></div>`;
     area.appendChild(d);
   });
 }
 
-function setStep(idx, state, bodyText) {
+function setStep(idx, state, items) {
   const el = document.getElementById("step-" + idx);
   if (!el) return;
   el.className = "step s-" + state;
-  const icons = { pending:"⬜", active:'<span class="spin-icon">⏳</span>', done:"✅", error:"❌" };
-  el.querySelector(".step-hd").innerHTML = `<span>${icons[state]}</span>&nbsp;${STEPS[idx].title}`;
-  if (bodyText !== undefined) el.querySelector(".step-body").textContent = bodyText;
+  const s = STEPS[idx];
+  const icons = { pending: s.emoji, active: '<span class="spin-icon">⏳</span>', done: '✅', error: '❌' };
+  el.querySelector(".step-hd").innerHTML = `
+    <span>${icons[state]}</span>
+    <span>مرحله ${idx+1} — ${s.title}</span>
+    <span class="badge">${s.badge}</span>`;
+
+  const body = el.querySelector(".step-body");
+  if (state === 'active') {
+    body.innerHTML = '<div class="thinking">در حال پردازش...</div>';
+  } else if (state === 'done' && items) {
+    body.innerHTML = renderItems(items);
+  } else if (state === 'error' && items) {
+    body.innerHTML = `<div class="thinking" style="color:#c53030">${items[0]}</div>`;
+  }
 }
 
 function showErr(msg) {
   const b = document.getElementById("errBox");
-  b.textContent = "❌ " + msg;
-  b.style.display = "block";
+  b.textContent = "❌ " + msg; b.style.display = "block";
 }
 
 async function callLLM(apiKey, prompt) {
@@ -197,11 +280,11 @@ async function callLLM(apiKey, prompt) {
     body: JSON.stringify({
       model: "openrouter/auto",
       messages: [{ role: "user", content: prompt }],
-      max_tokens: 1000,
-      temperature: 0.7
+      max_tokens: 600,
+      temperature: 0.6
     })
   });
-  if (!r.ok) throw new Error((await r.text()).slice(0, 200));
+  if (!r.ok) throw new Error((await r.text()).slice(0, 150));
   const d = await r.json();
   return d.choices[0].message.content.trim();
 }
@@ -218,19 +301,19 @@ async function startPlanning() {
 
   btn.disabled = true;
   btn.textContent = "⏳ در حال برنامه‌ریزی...";
-
   buildSteps();
 
   const ctx = { goal };
   for (let i = 0; i < STEPS.length; i++) {
-    setStep(i, "active", "در حال پردازش...");
+    setStep(i, "active");
     try {
-      const result = await callLLM(apiKey, STEPS[i].prompt(ctx));
-      ctx[STEPS[i].id] = result;
-      setStep(i, "done", result);
+      const raw = await callLLM(apiKey, STEPS[i].prompt(ctx));
+      ctx[STEPS[i].id] = raw;
+      const lines = parseList(raw);
+      setStep(i, "done", lines.length > 0 ? lines : [raw]);
     } catch(e) {
       ctx[STEPS[i].id] = "";
-      setStep(i, "error", "خطا: " + e.message);
+      setStep(i, "error", ["خطا: " + e.message]);
     }
   }