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

摘要：
同步 claude-office:「續上次 session」與「派發任務」hover 顯示氣泡,
說明 resume 僅能延續已結束的 session(codex exec resume)。

根本原因：
resume 限制只寫在 README,介面上無說明。

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

修法：
styles.css 新增 .tip 氣泡;SidePanel 掛上 data-tip 說明。

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

src/styles.css

@@ -387,6 +387,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;