任務派發按鈕加 hover 氣泡提示

摘要：
「續上次 session」與「派發任務」滑鼠停留時顯示氣泡說明,
講清楚 resume 的限制:只能延續已結束的 session,
無法插入正在終端機進行中的互動對話。

根本原因：
resume 的行為(--resume 最新已結束 session、執行中任務會排隊)
只寫在 README,介面上沒有任何說明,容易誤以為能接管進行中的對話。

影響：
純 UI 提示,無行為變更。

修法：
styles.css 新增 .tip 通用氣泡(data-tip 屬性 + ::before/::after,
延遲淡入、面板內靠右對齊);SidePanel 兩個控制項掛上說明文字。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/components/SidePanel.tsx

@@ -42,13 +42,21 @@ function TaskComposer({ agentId }: { agentId: string }) {
         }}
       />
       <div className="task-composer-row">
-        <label>
+        <label
+          className="tip"
+          data-tip="延續該專案最近一段「已結束」的 session 繼續對話(--resume)。注意:無法插入正在終端機進行中的互動對話;若該專案已有任務在跑,新任務會自動排隊。"
+        >
           <input type="checkbox" checked={resume} onChange={(e) => setResume(e.target.checked)} />
           續上次 session
         </label>
-        <button className="btn assign-btn" onClick={send} disabled={sending || !prompt.trim()}>
+        <span
-          {sending ? "派發中…" : "🚀 派發任務"}
+          className="tip"
-        </button>
+          data-tip="在該專案目錄開一個 headless session 執行此任務,過程會即時顯示在辦公室,完成後於事件紀錄回報。"
+        >
+          <button className="btn assign-btn" onClick={send} disabled={sending || !prompt.trim()}>
+            {sending ? "派發中…" : "🚀 派發任務"}
+          </button>
+        </span>
       </div>
     </div>
   );

src/styles.css

@@ -376,6 +376,60 @@
   cursor: pointer;
 }
 
+/* hover tooltip bubble (data-tip) */
+.tip {
+  position: relative;
+}
+
+.tip::before {
+  content: "";
+  position: absolute;
+  bottom: calc(100% + 2px);
+  left: 24px;
+  border: 6px solid transparent;
+  border-top-color: var(--text);
+  opacity: 0;
+  transition: opacity 0.15s ease 0.15s;
+  pointer-events: none;
+}
+
+.tip::after {
+  content: attr(data-tip);
+  position: absolute;
+  bottom: calc(100% + 13px);
+  left: 0;
+  width: 230px;
+  background: var(--text);
+  color: var(--bg-panel);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.55;
+  padding: 8px 10px;
+  border-radius: 9px;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
+  opacity: 0;
+  transition: opacity 0.15s ease 0.15s;
+  pointer-events: none;
+  white-space: normal;
+  text-align: left;
+  z-index: 20;
+}
+
+.tip:hover::before,
+.tip:hover::after {
+  opacity: 1;
+}
+
+.task-composer-row .tip::after {
+  left: auto;
+  right: 0;
+}
+
+.task-composer-row label.tip::after {
+  left: 0;
+  right: auto;
+}
+
 .task-composer-row .assign-btn {
   width: auto;
   margin-top: 0;