/* global React, ReactDOM, RELEASE_DATA, LINEAR_WORKSPACE */ const { useState, useMemo, useEffect, useRef, useCallback } = React; // ---------- helpers ---------- const PRODUCT_LABEL = { VF: "PredictGo", PG: "Predict Gaming" }; const PRODUCT_SHORT = { VF: "VF", PG: "PG" }; const LINEAR_WS = (typeof LINEAR_WORKSPACE !== "undefined" ? LINEAR_WORKSPACE : "singdm"); const PM_DISPLAY_KEY = "release-notes-pm-display"; // localStorage — toggle for editors/admins to hide PM features const WORKER_URL = "https://release-notes-sync.jmlin.workers.dev"; const GUEST_PWD_KEY = "release-notes-guest-pwd"; // sessionStorage — today's date string used as password const GUEST_DATA_KEY = "release-notes-guest-data"; // sessionStorage — cached release data from Worker const LANG_KEY = "release-notes-lang"; // localStorage — 'zh' | 'en' const SIDEBAR_KEY = "release-notes-sidebar"; // localStorage — '0' 收合 / '1' 展開 // i18n dictionary for the most visible UI strings (rest stays as-is) const I18N = { zh: { pageTitle: "版本發行紀錄", pageSubtitle: "PredictGo 與 Predict Gaming 的完整發版歷程 — 搜尋、篩選、追蹤每一個功能落地的版本。", searchPlaceholder: "搜尋關鍵字：例如「推薦碼」「錢包」「Mines」「提款」...", productAll: "全部產品", yearAll: "全部年份", typeAll: "全部類型", chipAll: "全部", chipLatest: "最新版本", chipHotfix: "含 Hotfix", chipFeature: "含新功能", typeNew: "新功能", typeFix: "修復", typeHotfix: "Hotfix", resultsLabel: "results", sortNewest: "最新優先", daysOverdue: (n) => `已逾期 ${n} 天`, daysLater: (n) => `${n} 天後發版`, releaseToday: "今天發版", releaseTomorrow: "明天發版", plannedPrefix: "預計", upcomingTotal: (n) => `${n} 個進行中`, inputPwdLabel: "輸入密碼", enterBtn: "進入", verifyingBtn: "驗證中...", pwdError: "密碼錯誤", magicLinkToggle: "用 Email Magic Link 登入", magicLinkPlaceholder: "you@example.com", magicLinkHint: "寄一封登入連結到你的信箱（限團隊成員）", magicLinkSendBtn: "寄送登入連結", magicLinkSending: "發送中...", magicLinkSentTitle: "登入連結已寄出", magicLinkSentHint: "點擊登入連結", magicLinkSentValid: "（連結 60 分鐘內有效）", magicLinkChangeEmail: "換一個信箱", loginInternalTool: "Internal Tool", loginBrandTitle: "Release Notes", emptyTitle: "找不到符合條件的版本", emptyNoMatch: "no match for", emptyClearFilters: "try clearing filters", logoutPrefix: "登出", productLabel: "產品", yearLabel: "年份", typeLabel: "類型", upcomingTitle: "預計發版", upcomingTabAll: "全部", upcomingTabVF: "PredictGo", upcomingTabPG: "Predict Gaming", statusCompleted: "已完成", statusStarted: "進行中", statusUnstarted: "待開始", noUpcoming: "目前沒有預計發版項目", whatsNew: "新功能 / 改善", bugFixes: "Bug Fixes", copyBtn: "複製", copiedBtn: "已複製", }, en: { pageTitle: "Release Notes", pageSubtitle: "Complete release history of PredictGo and Predict Gaming — search, filter, and track every shipped feature.", searchPlaceholder: "Search keywords: e.g. \"referral code\", \"wallet\", \"Mines\", \"withdrawal\"...", productAll: "All Products", yearAll: "All Years", typeAll: "All Types", chipAll: "All", chipLatest: "Latest", chipHotfix: "Has Hotfix", chipFeature: "Has Feature", typeNew: "New", typeFix: "Fix", typeHotfix: "Hotfix", resultsLabel: "results", sortNewest: "Newest First", daysOverdue: (n) => `Overdue ${n} days`, daysLater: (n) => `Ships in ${n} days`, releaseToday: "Ships today", releaseTomorrow: "Ships tomorrow", plannedPrefix: "Planned", upcomingTotal: (n) => `${n} in progress`, inputPwdLabel: "Enter Password", enterBtn: "Enter", verifyingBtn: "Verifying...", pwdError: "Incorrect password", magicLinkToggle: "Sign in via Email Magic Link", magicLinkPlaceholder: "you@example.com", magicLinkHint: "We'll email a sign-in link (team members only)", magicLinkSendBtn: "Send sign-in link", magicLinkSending: "Sending...", magicLinkSentTitle: "Sign-in link sent", magicLinkSentHint: "to open the sign-in link", magicLinkSentValid: "(link valid for 60 minutes)", magicLinkChangeEmail: "Use a different email", loginInternalTool: "Internal Tool", loginBrandTitle: "Release Notes", emptyTitle: "No matching releases found", emptyNoMatch: "no match for", emptyClearFilters: "try clearing filters", logoutPrefix: "Log out", productLabel: "Product", yearLabel: "Year", typeLabel: "Type", upcomingTitle: "Upcoming Releases", upcomingTabAll: "All", upcomingTabVF: "PredictGo", upcomingTabPG: "Predict Gaming", statusCompleted: "Completed", statusStarted: "In Progress", statusUnstarted: "To Do", noUpcoming: "No upcoming releases", whatsNew: "What's New", bugFixes: "Bug Fixes", copyBtn: "Copy", copiedBtn: "Copied", }, }; // Daily guest password = today's date in Taipei, formatted as MMDD (e.g. 2026-05-04 → "0504") const todayPasswordTPE = () => { const ymd = new Date().toLocaleDateString("en-CA", { timeZone: "Asia/Taipei" }); return ymd.slice(5).replace("-", ""); }; // ─── Supabase client ─── const supabase = window.supabase.createClient( window.SUPABASE_URL, window.SUPABASE_ANON_KEY, { auth: { detectSessionInUrl: true, persistSession: true, autoRefreshToken: true, }, } ); // Audit log helper — fire-and-forget function logAudit(action, target_type = null, target_id = null, metadata = null) { supabase.from("audit_log").insert({ action, target_type, target_id, metadata }).then(({ error }) => { if (error) console.warn("audit_log insert failed:", error.message); }); } function yearOf(d) { return d.slice(0, 4); } function getTypeTags(r) { const tags = []; if (r.hotfix) tags.push("hotfix"); if ((r.whatsNew?.length ?? 0) > 0) tags.push("new"); if ((r.bugFixes?.length ?? 0) > 0) tags.push("fix"); return tags; } function escapeRe(s) { return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); } // Highlight matches inside a string, returns React fragment function Highlight({ text, query }) { if (!query) return <>{text}; const re = new RegExp(`(${escapeRe(query)})`, "gi"); const parts = String(text).split(re); return ( <> {parts.map((p, i) => re.test(p) && p.toLowerCase() === query.toLowerCase() ? {p} : {p} )} ); } function matchesQuery(r, q) { if (!q) return true; const tickets = [ ...(r.parentTicket ? [r.parentTicket] : []), ...(r.whatsNew || []).flatMap(i => i.tickets || []), ...(r.bugFixes || []).flatMap(i => i.tickets || []), ]; const hay = [ r.version, r.title, PRODUCT_LABEL[r.product], ...(r.whatsNew || []).flatMap(i => [i.name, i.desc, ...(i.bullets || [])]), ...(r.bugFixes || []).flatMap(i => [i.name, i.desc, ...(i.bullets || [])]), ...tickets, ].join(" \u0001 ").toLowerCase(); return hay.includes(q.toLowerCase()); } // ---------- Ticket chip (PM mode only) ---------- function TicketChip({ id, product }) { const tint = product === "VF" ? "tint-vf" : "tint-pg"; return ( e.stopPropagation()} className={`${tint} mono rounded px-1.5 py-0.5 text-[10.5px] font-semibold tracking-wide hover:brightness-125 transition whitespace-nowrap`} title={`Open ${id} in Linear`} > {id} ); } // ---------- icons (inline, minimal) ---------- const Icon = { Search: (p) => ( ), Chev: (p) => ( ), X: (p) => ( ), SortDesc: (p) => ( ), SortAsc: (p) => ( ), Dot: (p) => ( ), Sun: (p) => ( ), Moon: (p) => ( ), Calendar: (p) => ( ), Doc: (p) => ( ), Copy: (p) => ( ), Check: (p) => ( ), Users: (p) => ( ), History: (p) => ( ), Away: (p) => ( ), Link: (p) => ( ), Inbox: (p) => ( ), Ban: (p) => ( ), Alert: (p) => ( ), Clip: (p) => ( ), }; /** * 狀態訊息。成功／失敗一律用 icon 表示 —— 網頁任何位置都不使用 emoji 或 ✓✗ 符號當視覺， * 見 CLAUDE.md「網頁視覺鐵律」。 */ function FlashMsg({ msg, size = "text-[12px]" }) { if (!msg) return null; const ok = msg.type === "ok"; const I = ok ? Icon.Check : Icon.X; return ( {msg.text} ); } // ---------- Theme management ---------- const THEME_KEY = "release-notes-theme"; function getInitialTheme() { const saved = localStorage.getItem(THEME_KEY); if (saved === "light" || saved === "dark") return saved; return window.matchMedia?.("(prefers-color-scheme: light)").matches ? "light" : "dark"; } function applyTheme(theme) { if (theme === "light") document.body.classList.add("theme-light"); else document.body.classList.remove("theme-light"); } function ThemeToggle({ theme, onToggle }) { const isDark = theme === "dark"; return ( ); } function LangToggle({ lang, onToggle }) { const next = lang === "zh" ? "EN" : "中"; const label = lang === "zh" ? "Switch to English" : "切換至中文"; return ( ); } // ---------- sidebar ---------- function Sidebar({ counts, filters, setFilters, open }) { const FilterGroup = ({ title, items, value, onChange }) => (
{title}
{items.map(it => { const active = value === it.key; return ( ); })}
); return ( ); } // ---------- search bar ---------- function SearchBar({ query, setQuery, inputRef, t }) { return (
setQuery(e.target.value)} placeholder={t ? t("searchPlaceholder") : "搜尋關鍵字：例如「推薦碼」「錢包」「Mines」「提款」..."} className="w-full h-12 pl-11 pr-24 bg-surface border border-border rounded-xl text-[15px] text-fg placeholder:text-fg3 outline-none focus:border-borderStrong transition-colors" />
{query ? ( ) : ( <> ⌘ K )}
); } // ---------- keyword summary ---------- function KeywordSummary({ query, hits, onJump }) { if (!query || hits.length === 0) return null; return (
「{query}」曾在 {hits.length} 個版本出現過：
{hits.map(r => ( ))}
); } // ---------- chips ---------- function QuickChips({ value, onChange, sort, setSort, visibleCount }) { const chips = [ { key: "all", label: "全部版本" }, { key: "latest", label: "最新版本" }, { key: "hotfix", label: "含 Hotfix" }, { key: "new", label: "含新功能" }, ]; return (
{chips.map(c => { const active = value === c.key; return ( ); })}
{visibleCount} results
); } // ---------- brand mark（和瀏覽器分頁 favicon 同一個圖形）---------- let brandMarkSeq = 0; function BrandMark({ className = "w-5 h-5", rx = 7 }) { const idRef = useRef(null); if (idRef.current === null) idRef.current = `bm-${++brandMarkSeq}`; const id = idRef.current; return ( ); } // ---------- version card ---------- function VersionCard({ r, query, open, onToggle, flash, cardRef, pmMode }) { const tint = r.product === "VF" ? "tint-vf" : "tint-pg"; return (
{/* header */} {/* body */}
{r.whatsNew?.length > 0 && (
)} {r.bugFixes?.length > 0 && (
0} subVersionDates={r.subVersionDates} /> )}
); } // ---------- Tab Bar ---------- // 分頁 icon — 統一線性風格（16px，currentColor 描邊，自動吃亮/暗色） const TAB_SVG = { history: , upcoming: , roadmap: , schedule: , qa: , admin: , draft: , relay: , }; function TabIcon({ k }) { return ( {TAB_SVG[k]} ); } function TabBar({ active, onChange, upcomingCount, roadmapCount, historyCount, pmUnlocked, isAdmin, canSeeQa, draftCount = 0, relayUnread = 0 }) { const tabs = [ { key: "history", label: "Release History", count: historyCount }, { key: "upcoming", label: "Upcoming Releases", count: upcomingCount }, { key: "roadmap", label: "Roadmap", count: roadmapCount }, ...(pmUnlocked ? [{ key: "schedule", label: "Schedule", count: null, pmOnly: true }] : []), ...(pmUnlocked ? [{ key: "draft", label: "草稿審核", count: draftCount || null, pmOnly: true }] : []), ...(pmUnlocked ? [{ key: "relay", label: "TG 中繼", count: relayUnread || null, pmOnly: true }] : []), ...(canSeeQa ? [{ key: "qa", label: "QA", count: null, qaOnly: true }] : []), ...(isAdmin ? [{ key: "admin", label: "Admin", count: null, adminOnly: true }] : []), ]; const current = tabs.find(t => t.key === active) || tabs[0]; // 分頁數量已經到 8 個，手機橫向捲的分頁列要一直左右撥才找得到人， // 而且在畫面最上緣、單手構不到。手機改成底部膠囊鈕 + 彈出全清單。 const [sheetOpen, setSheetOpen] = useState(false); const badge = (t, activeStyle) => ( <> {t.count != null && ( {t.count} )} {t.pmOnly && PM} {t.qaOnly && QA} {t.adminOnly && ADMIN} ); return ( <>
{tabs.map(t => { const isActive = active === t.key; return ( ); })}
{/* ───── 手機：底部膠囊鈕 ───── */} {/* ───── 手機：彈出的完整分頁清單 ───── */} {sheetOpen && (
setSheetOpen(false)} />
{tabs.map(t => { const on = t.key === active; return ( ); })}
)} ); } // ═══════════════════════════════════════════════════════════════════ // QA 進測看板 — admin 專屬。資料由 worker 每日算好存進 Supabase，這裡讀 /qa-board。 const QA_LANES = [ { key: "risk", name: "帶病上線 — code 已在 main（正式站），但 QA 尚未通過", color: "var(--qa-risk)", bg: "var(--qa-risk-bg)", att: true, pill: "帶病上線" }, { key: "fail", name: "退回 — QA 未通過，已打回 RD", color: "var(--qa-risk)", bg: "var(--qa-risk-bg)", att: true, pill: "退回" }, { key: "wait", name: "待測 — 等待 QA 認領", color: "var(--qa-wait)", bg: "var(--qa-wait-bg)", att: false, pill: "待測" }, { key: "test", name: "測試中 — QA 進行中", color: "var(--qa-test)", bg: "var(--qa-test-bg)", att: false, pill: "測試中" }, { key: "ready", name: "待發版 — QA 通過，等待上正式站", color: "var(--qa-pass)", bg: "var(--qa-pass-bg)", att: false, pill: "待發版" }, { key: "done", name: "已上線 · 監測中", color: "var(--qa-mon)", bg: "var(--qa-mon-bg)", att: false, pill: "監測中" }, ]; const QA_STAGE_LABEL = { branch: "分支", uat: "UAT", dev: "DEV", main: "MAIN" }; const QA_VERDICT_COLOR = { "已上正式": "var(--qa-pass)", "QA測試": "var(--qa-test)", "UAT": "var(--qa-wait)", "開發中": "var(--qa-test)" }; function QaTicketRow({ t }) { const [open, setOpen] = useState(false); const lane = QA_LANES.find((l) => l.key === t.lane) || QA_LANES[5]; const vColor = t.verdict ? (QA_VERDICT_COLOR[t.verdict] || "var(--qa-none)") : "var(--qa-none)"; const stageColor = (s) => (s === "pass" ? "var(--qa-pass)" : s === "risk" ? "var(--qa-risk)" : "var(--qa-none)"); const stageText = { pass: "已到", risk: "未驗上線", none: "未到", unknown: "查無" }; const [copiedId, setCopiedId] = useState(false); const [copiedFull, setCopiedFull] = useState(false); const doCopy = (text, setFlag) => { try { navigator.clipboard.writeText(text); } catch (e) { /* ignore */ } setFlag(true); setTimeout(() => setFlag(false), 1000); }; return (
{open && (
{t.risk && (
此票 code 已在 main（正式站），但 Linear 狀態為「{t.status}」— 上線未經 QA 驗證
)} {t.slipped && (
↩ 延期：原訂 v{t.origVersion} 未如期出測，延至 v{t.version} 二次進測（當前目標版本以 v{t.version} 為準）
)}
負責：{t.assignee || "未指派"} 類型：{t.type === "-" ? "未標" : t.type} Linear 狀態：{t.status} 最後更新：{t.updatedAt}
{["branch", "uat", "dev", "main"].map((n, i) => { const s = (t.stages && t.stages[n]) || "unknown"; const c = stageColor(s); return (
{s === "pass" ? : s === "risk" ? "!" : s === "unknown" ? "?" : "·"}
{QA_STAGE_LABEL[n]}
{stageText[s]}
{i < 3 &&
} ); })}
在 Linear 開啟 ↗
)}
); } function QaBoard() { const [state, setState] = useState({ loading: true, error: null, data: null }); const [prod, setProd] = useState("ALL"); const [ver, setVer] = useState("ALL"); const [pos, setPos] = useState("ALL"); const [assignee, setAssignee] = useState("ALL"); const [laneF, setLaneF] = useState("ALL"); const [q, setQ] = useState(""); const [sortBy, setSortBy] = useState("version"); const [preset, setPreset] = useState(null); const [view, setView] = useState("lane"); const [refreshing, setRefreshing] = useState(false); const [copied, setCopied] = useState(false); const doRefresh = async () => { setRefreshing(true); try { const { data: { session } } = await supabase.auth.getSession(); const token = session?.access_token; const res = await fetch(`${WORKER_URL}/qa-board/refresh`, { method: "POST", headers: { Authorization: `Bearer ${token}` } }); const j = await res.json(); if (j.ok) setState({ loading: false, error: null, data: j }); } catch (e) { /* 保留舊資料 */ } setRefreshing(false); }; useEffect(() => { (async () => { try { const { data: { session } } = await supabase.auth.getSession(); const token = session?.access_token; if (!token) throw new Error("尚未登入"); const res = await fetch(`${WORKER_URL}/qa-board`, { headers: { Authorization: `Bearer ${token}` } }); const j = await res.json(); if (!j.ok) throw new Error(j.error || "讀取失敗"); setState({ loading: false, error: null, data: j }); } catch (e) { setState({ loading: false, error: String(e.message || e), data: null }); } })(); }, []); if (state.loading) return
載入 QA 看板中…
; if (state.error) return
無法載入：{state.error}
; const { tickets = [], stats = {}, generatedAt } = state.data; // 篩選選項（從資料動態產生） const SEL = "text-[12.5px] bg-surface border border-border rounded-lg px-2.5 py-1.5 text-fg2 cursor-pointer"; const versions = [...new Set(tickets.map((t) => t.version).filter(Boolean))] .sort((a, b) => b.localeCompare(a, undefined, { numeric: true })); const assignees = [...new Set(tickets.map((t) => t.assignee).filter(Boolean))].sort(); const POS_OPTS = ["已上正式", "QA測試", "UAT", "開發中"]; // 快捷篩選（一按套用組合條件） const latestVer = versions[0] || null; const PRESETS = [ { key: "qa_nover", label: "進 QA · 無版號", desc: "在待測/測試中、但沒壓版號", pred: (t) => ["wait", "test"].includes(t.lane) && !t.version }, { key: "prod_pass_nover", label: "上正式 · QA過 · 無版號", desc: "已上 main + QA通過、但沒壓版號", pred: (t) => (t.pos || []).includes("main") && ["ready", "done"].includes(t.lane) && !t.version }, { key: "risk", label: "帶病上線", desc: "已上 main 但 QA 未過", pred: (t) => t.lane === "risk" }, { key: "latest", label: `最新進測版本${latestVer ? " v" + latestVer : ""}`, desc: "當前最新版號的所有票", pred: (t) => t.version && t.version === latestVer }, { key: "monitoring", label: "監測中 · 舊→新", desc: "監測中的票，停滯久的排前面", pred: (t) => t.lane === "done", sort: "stale" }, { key: "no_branch", label: "找不到分支", desc: "GitLab 掃不到對應分支/MR（查無 code）", pred: (t) => !t.envKnown }, // 以下僅供 KPI 卡片點擊使用，不顯示為快捷 chip { key: "slipped", label: "延期票", chip: false, pred: (t) => t.slipped }, { key: "onmain", label: "已上正式", chip: false, pred: (t) => (t.pos || []).includes("main") }, { key: "indev", label: "開發中", chip: false, pred: (t) => t.verdict === "開發中" }, { key: "known", label: "已對到 code", chip: false, pred: (t) => t.envKnown }, ]; const activePreset = PRESETS.find((p) => p.key === preset) || null; // 套用篩選（preset 啟用時以 preset 條件為主，仍可疊產品篩選） const rows = tickets.filter((t) => { if (prod !== "ALL" && t.product !== prod) return false; if (activePreset) return activePreset.pred(t); if (ver === "__none" && t.version) return false; if (ver !== "ALL" && ver !== "__none" && t.version !== ver) return false; if (pos !== "ALL" && (t.verdict || "查無") !== pos) return false; if (assignee !== "ALL" && (t.assignee || "未指派") !== assignee) return false; if (laneF !== "ALL" && t.lane !== laneF) return false; if (q.trim() && !`${t.id} ${t.title}`.toLowerCase().includes(q.trim().toLowerCase())) return false; return true; }); // 排序（preset 有指定就用它，否則用手動排序） const effSort = (activePreset && activePreset.sort) || sortBy; const sortFn = { version: (a, b) => String(b.version).localeCompare(String(a.version), undefined, { numeric: true }) || (b.updatedAt < a.updatedAt ? -1 : 1), stale: (a, b) => (a.updatedAt < b.updatedAt ? -1 : 1), updated: (a, b) => (b.updatedAt < a.updatedAt ? -1 : 1), id: (a, b) => a.id.localeCompare(b.id, undefined, { numeric: true }), }[effSort]; const anyFilter = prod !== "ALL" || ver !== "ALL" || pos !== "ALL" || assignee !== "ALL" || laneF !== "ALL" || q.trim(); const resetFilters = () => { setProd("ALL"); setVer("ALL"); setPos("ALL"); setAssignee("ALL"); setLaneF("ALL"); setQ(""); }; const pickPreset = (k) => { resetFilters(); setPreset((cur) => (cur === k ? null : k)); }; // 一鍵複製：依當下篩選 + 檢視，排成 TG 文字。每票只留「票號 + 標題」，票號嵌 Linear 連結（HTML）。 const copyText = async () => { const esc = (s) => String(s).replace(/&/g, "&").replace(//g, ">"); const now = new Date().toLocaleString("zh-TW", { hour12: false }).replace(/:\d\d$/, ""); const parts = []; if (activePreset) parts.push(activePreset.label); else { if (prod !== "ALL") parts.push(prod); if (ver !== "ALL") parts.push(ver === "__none" ? "無版號" : "v" + ver); if (pos !== "ALL") parts.push(pos); if (laneF !== "ALL") parts.push((QA_LANES.find((l) => l.key === laneF) || {}).pill || laneF); if (assignee !== "ALL") parts.push(assignee); if (q.trim()) parts.push(`「${q.trim()}」`); } const fdesc = parts.length ? parts.join(" · ") : "全部"; const groups = view === "version" ? [...new Set(rows.map((t) => t.version))] .sort((a, b) => { if (a === b) return 0; if (!a) return 1; if (!b) return -1; return b.localeCompare(a, undefined, { numeric: true }); }) .map((v) => ({ name: v ? "v" + v : "無版號", items: rows.filter((t) => t.version === v).sort(sortFn) })) : QA_LANES.map((L) => ({ name: L.pill, items: rows.filter((t) => t.lane === L.key).sort(sortFn) })); const plain = [`QA 進測狀態｜${fdesc}｜${rows.length} 張`, `更新 ${now}`, ""]; const html = [`QA 進測狀態｜${esc(fdesc)}｜${rows.length} 張`, `更新 ${now}`, ""]; for (const g of groups) { if (!g.items.length) continue; plain.push(`【${g.name}】${g.items.length}`); html.push(`【${esc(g.name)}】${g.items.length}`); for (const t of g.items) { plain.push(`${t.id} ${t.title}\nhttps://linear.app/${LINEAR_WS}/issue/${t.id}`); html.push(`${t.id} ${esc(t.title)}`); } plain.push(""); html.push(""); } const plainStr = plain.join("\n").trim(); const htmlStr = html.join("
").trim(); try { if (navigator.clipboard && window.ClipboardItem) { await navigator.clipboard.write([new window.ClipboardItem({ "text/html": new Blob([htmlStr], { type: "text/html" }), "text/plain": new Blob([plainStr], { type: "text/plain" }), })]); } else { await navigator.clipboard.writeText(plainStr); } setCopied(true); setTimeout(() => setCopied(false), 1800); } catch (e) { try { await navigator.clipboard.writeText(plainStr); setCopied(true); setTimeout(() => setCopied(false), 1800); } catch (_) { /* ignore */ } } }; const kpis = [ { n: stats.risk || 0, l: "帶病上線", c: "var(--qa-risk)", pk: "risk" }, { n: stats.slipped || 0, l: "延期", c: "var(--qa-wait)", pk: "slipped" }, { n: stats.onMain || 0, l: "已上正式", c: "var(--qa-pass)", pk: "onmain" }, { n: stats.inDev || 0, l: "開發中", c: "var(--qa-test)", pk: "indev" }, { n: (stats.total || 0) - (stats.known || 0), l: "查無 code", c: "var(--qa-none)", pk: "no_branch" }, ]; return (

QA 進測看板

Linear + GitLab 實測 · 更新 {generatedAt ? new Date(generatedAt).toLocaleString("zh-TW", { hour12: false }) : "—"}
{stats.risk > 0 && (
{stats.risk} 張帶病上線：code 已在 main（正式站），但 Linear QA 狀態尚未通過。 {stats.slipped > 0 && 另有 {stats.slipped} 張延期票。}
)}
{kpis.map((k) => ( ))}
{/* 快捷篩選 */}
快捷 {PRESETS.filter((p) => p.chip !== false).map((p) => ( ))}
{/* 篩選 + 排序列 */}
{["ALL", "VF", "PG", "Pheme"].map((p) => ( ))}
{activePreset && ( 快捷篩選：{activePreset.label} )} {!activePreset && (<> setQ(e.target.value)} placeholder="搜尋 票號 / 標題" className="text-[12.5px] bg-surface border border-border rounded-lg px-3 py-1.5 text-fg placeholder:text-fg3 w-44" /> )}
檢視
{[["lane","風險"],["version","版號"]].map(([k,lbl]) => ( ))}
排序
顯示 {rows.length} / {tickets.length} 張 {(anyFilter || preset) && }
{rows.length === 0 && (
沒有符合篩選條件的票 {anyFilter && }
)} {view === "lane" && QA_LANES.map((L) => { const lr = rows.filter((t) => t.lane === L.key).sort(sortFn); if (!lr.length) return null; return (
{L.name} {lr.length}
{lr.map((t) => )}
); })} {view === "version" && (() => { const vers = [...new Set(rows.map((t) => t.version))].sort((a, b) => { if (a === b) return 0; if (!a) return 1; if (!b) return -1; return b.localeCompare(a, undefined, { numeric: true }); }); return vers.map((v) => { const vr = rows.filter((t) => t.version === v).sort(sortFn); if (!vr.length) return null; const riskN = vr.filter((t) => t.lane === "risk").length; const doneN = vr.filter((t) => t.pos && t.pos.includes("main")).length; return (
{v ? "v" + v : "無版號"} {vr.length} {riskN > 0 && 帶病上線 {riskN}} 已上正式 {doneN}/{vr.length}
{vr.map((t) => )}
); }); })()}

環境軸實掃 GitLab group gm5462110 分支與 merged MR，用合併圖推算位置。 流程 分支 → uat → dev → main；uat=最新功能、dev=QA測試站、main=正式站。 延期票（≥2 個 Release label）只計入最新版 release note。此頁僅 admin 可見。

); } // ═══════════════════════════════════════════════════════════════════ // Admin Panel — only visible/accessible when role === 'admin' // ═══════════════════════════════════════════════════════════════════ const ROLE_META = { admin: { label: "Admin", cls: "tint-hot", desc: "完整權限：管理使用者、所有功能" }, pm: { label: "PM", cls: "tint-vf", desc: "可編輯 Schedule、看 Linear 票號 / Notion 連結" }, qa: { label: "QA", cls: "tint-new", desc: "可看 release notes + QA 進測看板" }, viewer: { label: "Viewer", cls: "tint-none", desc: "只能看 release notes，無 PM 功能" }, // 'editor' 角色保留 enum 但 UI 不再選用（與 pm 同權限，視為相容舊資料） editor: { label: "Editor", cls: "tint-vf", desc: "（舊角色，等同 PM）", hidden: true }, }; function fmtDateTime(s) { if (!s) return "—"; const d = new Date(s); const yy = d.getFullYear(); const mm = String(d.getMonth() + 1).padStart(2, "0"); const dd = String(d.getDate()).padStart(2, "0"); const hh = String(d.getHours()).padStart(2, "0"); const mi = String(d.getMinutes()).padStart(2, "0"); return `${yy}-${mm}-${dd} ${hh}:${mi}`; } function EditUserModal({ user, onClose, onSave, currentUserId }) { const [role, setRole] = useState(user.role); const [isActive, setIsActive] = useState(user.is_active); const [saving, setSaving] = useState(false); const [error, setError] = useState(null); const isSelf = user.id === currentUserId; const submit = async () => { if (saving) return; setSaving(true); setError(null); const { data, error } = await supabase .from("profiles") .update({ role, is_active: isActive }) .eq("id", user.id) .select() .single(); setSaving(false); if (error) { setError(error.message); return; } if (data) { logAudit("update_user", "user", user.id, { email: user.email, role_from: user.role, role_to: role, active_from: user.is_active, active_to: isActive, }); onSave(data); } }; return (
e.stopPropagation()}>

編輯使用者

{user.email}
{Object.entries(ROLE_META) .filter(([key, meta]) => !meta.hidden || role === key) // hide deprecated unless user already has it .map(([key, meta]) => ( ))}
{error && (
儲存失敗：{error}
)}
); } // ═══════════════════════════════════════════════════════════════════ // PM 休假自動化 UI（A1 休假模式 / 待決佇列，A5 Release Note 草稿審核） // 這一段是後加的，刻意獨立成自己的元件，不動原有的渲染邏輯。 // ═══════════════════════════════════════════════════════════════════ /** 帶 Bearer token 打 Worker 的小工具；失敗直接 throw，呼叫端 catch 顯示訊息 */ async function pmApi(path, opts = {}) { const { data: { session } } = await supabase.auth.getSession(); const token = session?.access_token; if (!token) throw new Error("尚未登入或 session 已失效，請重新整理"); const headers = { Authorization: `Bearer ${token}`, ...(opts.headers || {}) }; if (opts.body) headers["Content-Type"] = "application/json"; const res = await fetch(`${WORKER_URL}${path}`, { ...opts, headers }); const ct = res.headers.get("content-type") || ""; const data = ct.includes("application/json") ? await res.json() : { ok: false, error: `HTTP ${res.status}` }; if (!data.ok) throw new Error(data.error || `HTTP ${res.status}`); return data; } // 通知類型 —— 決定休假期間哪一位代理人收到哪一種訊息 const NOTIFY_KINDS = [ { key: "triage", label: "待確認需求", hint: "TG 群組疑似需求，附「開單／略過」按鈕" }, { key: "ticket_created", label: "開單成功", hint: "bot 開了一張票的通知" }, { key: "error", label: "系統錯誤", hint: "開單失敗等技術問題" }, { key: "decision", label: "決策提醒", hint: "cycle 指派超額" }, { key: "digest", label: "Cycle digest", hint: "每日 10:00 的 cycle 狀態" }, { key: "stale", label: "停滯票提醒", hint: "新票超過 24h 沒 triage" }, { key: "release", label: "版本草稿待審", hint: "週一產出的 release note 草稿" }, ]; const KIND_LABEL = Object.fromEntries(NOTIFY_KINDS.map(k => [k.key, k.label])); /** bot 送出的訊息帶 HTML 標籤（parse_mode: HTML）。這裡還原成純文字顯示， * 刻意不用 dangerouslySetInnerHTML —— 內容含使用者在 TG 打的字，不冒這個險。 */ function stripTags(html) { return String(html || "") .replace(/<[^>]+>/g, "") .replace(/</g, "<").replace(/>/g, ">") .replace(/"/g, '"').replace(/'/g, "'") .replace(/&/g, "&"); } const EMPTY_ABSENCE = { active: false, from: "", to: "", deputies: [], fallback_tg_id: "", mirror_to_pm: true, }; function daysBetween(a, b) { return Math.ceil((Date.parse(b) - Date.parse(a)) / 86400000); } // ---------- A1 休假模式 ---------- function HolidayPanel() { const [abs, setAbs] = useState(EMPTY_ABSENCE); const [inbox, setInbox] = useState([]); const [onlyOpen, setOnlyOpen] = useState(true); const [loading, setLoading] = useState(true); const [saving, setSaving] = useState(false); const [msg, setMsg] = useState(null); const flash = (type, text) => { setMsg({ type, text }); setTimeout(() => setMsg(null), 6000); }; const loadInbox = useCallback(async (open) => { try { const d = await pmApi(`/pm-inbox${open ? "?open=1" : ""}`); setInbox(d.items || []); } catch (e) { console.error("pm-inbox:", e.message); } }, []); useEffect(() => { let cancelled = false; (async () => { setLoading(true); try { const d = await pmApi("/absence"); if (!cancelled) setAbs({ ...EMPTY_ABSENCE, ...(d.absence || {}) }); } catch (e) { if (!cancelled) flash("err", e.message); } await loadInbox(onlyOpen); if (!cancelled) setLoading(false); })(); return () => { cancelled = true; }; }, []); useEffect(() => { loadInbox(onlyOpen); }, [onlyOpen, loadInbox]); const patch = (k, v) => setAbs(prev => ({ ...prev, [k]: v })); const patchDeputy = (i, k, v) => setAbs(prev => ({ ...prev, deputies: prev.deputies.map((d, n) => n === i ? { ...d, [k]: v } : d) })); const toggleScope = (i, kind) => setAbs(prev => ({ ...prev, deputies: prev.deputies.map((d, n) => { if (n !== i) return d; const cur = Array.isArray(d.scope) ? d.scope : []; return { ...d, scope: cur.includes(kind) ? cur.filter(x => x !== kind) : [...cur, kind] }; }), })); const addDeputy = () => setAbs(prev => ({ ...prev, deputies: [...prev.deputies, { name: "", tg_id: "", scope: [] }] })); const removeDeputy = (i) => setAbs(prev => ({ ...prev, deputies: prev.deputies.filter((_, n) => n !== i) })); const save = async () => { if (saving) return; setSaving(true); try { const d = await pmApi("/absence", { method: "POST", body: JSON.stringify(abs) }); setAbs({ ...EMPTY_ABSENCE, ...(d.absence || {}) }); flash("ok", d.absence.active ? "休假模式已開啟 —— 通知會改送代理人" : "已存檔（目前是正常模式）"); } catch (e) { flash("err", e.message); } finally { setSaving(false); } }; const markHandled = async (id) => { try { await pmApi("/pm-inbox/mark", { method: "POST", body: JSON.stringify({ ids: [id] }) }); setInbox(prev => onlyOpen ? prev.filter(x => x.id !== id) : prev.map(x => x.id === id ? { ...x, handled: true } : x)); } catch (e) { flash("err", e.message); } }; const today = new Date().toLocaleDateString("en-CA", { timeZone: "Asia/Taipei" }); const inWindow = abs.active && (!abs.from || today >= abs.from) && (!abs.to || today <= abs.to); const daysLeft = abs.to ? daysBetween(today, abs.to) : null; if (loading) return
載入中…
; return (
{/* 狀態橫幅 */}
{inWindow ? : }
{inWindow ? "休假模式進行中" : "正常模式"}
{inWindow ? <>通知改送代理人{daysLeft != null && daysLeft >= 0 ? `，還剩 ${daysLeft} 天` : ""} : <>所有通知照常私訊 PM 本人}
{abs.active && !inWindow && ( 已勾選啟用，但今天不在 {abs.from || "—"} ~ {abs.to || "—"} 區間內 )}
{/* 設定 */}

休假設定

改完按「儲存設定」即時生效，不需要重新部署任何程式。系統最多延遲 1 分鐘（快取）。

起 patch("from", e.target.value)} className="h-8 px-2.5 bg-surface2 border border-border rounded-md text-fg text-[12.5px] outline-none focus:border-borderStrong" />
迄 patch("to", e.target.value)} className="h-8 px-2.5 bg-surface2 border border-border rounded-md text-fg text-[12.5px] outline-none focus:border-borderStrong" />
{/* 代理人 */}
代理人 勾選的類型才會送給這個人
{abs.deputies.length === 0 && (
還沒有代理人。休假期間沒有代理人的話，通知會退回給 PM 本人。
)} {abs.deputies.map((d, i) => (
patchDeputy(i, "name", e.target.value)} className="h-9 sm:h-8 px-2.5 bg-surface2 border border-border rounded-md text-fg text-[12.5px] outline-none focus:border-borderStrong w-full sm:w-[150px]" /> patchDeputy(i, "tg_id", e.target.value)} className="h-9 sm:h-8 px-2.5 bg-surface2 border border-border rounded-md text-fg text-[12.5px] mono outline-none focus:border-borderStrong w-full sm:w-[200px]" />
{NOTIFY_KINDS.map(k => { const on = Array.isArray(d.scope) && d.scope.includes(k.key); return ( ); })}
))}
Fallback TG id patch("fallback_tg_id", e.target.value)} className="h-9 sm:h-8 px-2.5 bg-surface2 border border-border rounded-md text-fg text-[12.5px] mono outline-none focus:border-borderStrong w-full sm:w-[220px]" />
{msg && ( )}
{/* 待決佇列 */}

待決佇列

所有原本要私訊 PM 的通知都會留一份在這
{inbox.length}
{inbox.map(item => (
{fmtDateTime(item.created_at)} {KIND_LABEL[item.kind] || item.kind}
{stripTags(item.body)}
{item.during_absence ? "休假期間 · " : ""}送達 {(item.sent_to || []).length} 人 {item.handled && item.handled_by ? ` · 已由 ${item.handled_by} 處理` : ""}
{!item.handled && ( )}
))} {inbox.length === 0 && (
{onlyOpen ? "沒有待處理的項目" : "尚無紀錄"}
)}
); } // ---------- 群組綁定（哪個 TG 群組開到哪個 Linear team）---------- // // 這頁存在的原因：以前這份設定要手寫 JSON、還要自己抄 chat_id， // 抄錯一個字就整份設定失效，而且失效時是靜默的（票照開，只是開錯 team）。 // 這裡把 chat_id 藏起來，只讓人用下拉選單挑。 const BIND_EMPTY = { products: [], format: "standard" }; /** 一筆設定可能是新寫法 products: [] 或舊寫法 product: "PG"，統一攤平成陣列 */ function bindProducts(entry) { if (!entry) return []; const src = Array.isArray(entry.products) ? entry.products : (entry.product ? [entry.product] : []); return src.map(p => String(p || "").toUpperCase()).filter(Boolean); } /** config 可能用 chat_id 或群組名稱當 key，兩種都要對得到 */ function bindOf(config, chat) { const entry = config[String(chat.chat_id)] || (chat.title ? config[String(chat.title).trim()] : null); if (!entry) return BIND_EMPTY; return { products: bindProducts(entry), format: entry.format || "standard" }; } function ChatBindingPanel() { const [config, setConfig] = useState({}); const [chats, setChats] = useState([]); const [products, setProducts] = useState([]); const [formats, setFormats] = useState([]); const [loading, setLoading] = useState(true); const [saving, setSaving] = useState(false); const [dirty, setDirty] = useState(false); const [msg, setMsg] = useState(null); const flash = (type, text) => { setMsg({ type, text }); setTimeout(() => setMsg(null), 6000); }; const load = useCallback(async () => { setLoading(true); try { const d = await pmApi("/chat-config"); setConfig(d.config || {}); setChats(d.chats || []); // 舊版 worker 的清單裡有一個 code="" 的「不指定」選項，多選介面用不到，濾掉 setProducts((d.products || []).filter(p => p && p.code)); setFormats(d.formats || []); setDirty(false); } catch (e) { flash("err", e.message); } setLoading(false); }, []); useEffect(() => { load(); }, [load]); // 一次寫兩個 key：chat_id（精準）＋ 群組名稱（備援）。 // 群組從一般群升級成超級群時 chat_id 會變，名稱那把才救得回來。 const setBind = (chat, patchObj) => { setConfig(prev => { const next = { ...bindOf(prev, chat), ...patchObj }; const products = (next.products || []).filter(Boolean); const format = next.format || "standard"; const out = { ...prev }; const idKey = String(chat.chat_id); const titleKey = String(chat.title || "").trim(); if (products.length === 0 && format === "standard") { delete out[idKey]; if (titleKey) delete out[titleKey]; } else { out[idKey] = { products, format, note: titleKey }; if (titleKey) out[titleKey] = { products, format, note: "名稱備援" }; } return out; }); setDirty(true); }; /** 點一下切換某個產品在不在候選清單裡 */ const toggleProduct = (chat, code) => { const cur = bindOf(config, chat).products; setBind(chat, { products: cur.includes(code) ? cur.filter(c => c !== code) : [...cur, code], }); }; const dropOrphan = (key) => { setConfig(prev => { const out = { ...prev }; delete out[key]; return out; }); setDirty(true); }; const save = async () => { setSaving(true); try { const r = await pmApi("/chat-config", { method: "POST", body: JSON.stringify({ config }) }); setConfig(r.config || {}); setDirty(false); flash("ok", `已儲存，${r.entries} 筆綁定生效中（下一則訊息就會照新設定走）`); } catch (e) { flash("err", e.message); } setSaving(false); }; // 設定裡有、但不在 bot 可見群組清單裡的 key（手動加的、或群組已解散） const known = new Set(); chats.forEach(c => { known.add(String(c.chat_id)); if (c.title) known.add(String(c.title).trim()); }); const orphans = Object.keys(config).filter(k => !known.has(k)); const boundCount = chats.filter(c => { const b = bindOf(config, c); return b.products.length > 0 || b.format !== "standard"; }).length; if (loading) return
載入中…
; return (

群組 → Linear team 綁定

選一個 team：該群的票一律開到那裡，AI 說什麼都不算。
選多個：AI 只能在你挑的這幾個裡面判斷，絕不會開到清單外。 都不選＝完全交給 AI。儲存後立刻生效，不用重新部署。

{boundCount} / {chats.length} 已綁定
{chats.map(c => { const b = bindOf(config, c); const bound = b.products.length > 0; return (
{c.title || "(未命名群組)"} {bound && ( {b.products.length === 1 ? "已綁定" : `限 ${b.products.length} 個 team`} )}
{c.chat_id} {c.last_message_at ? ` · 最後訊息 ${fmtDateTime(c.last_message_at)}` : " · 尚無訊息"}
可開到哪些 team{b.products.length > 1 ? "（AI 在其中判斷）" : ""}
{products.map(p => { const on = b.products.includes(p.code); return ( ); })} {b.products.length === 0 && ( 未選＝讓 AI 判斷 )}
票面格式
); })} {chats.length === 0 && (
還沒看到任何群組。
群組要有人說過話，bot 才會記錄到它——把 bot 拉進群後隨便發一則訊息，再按「重新整理」。
)}
{orphans.length > 0 && (

其他設定

這些 key 不在上面的群組清單裡——可能是名稱備援、手動加的，或群組已經解散。留著不影響運作。

{orphans.map(k => (
{k} {bindProducts(config[k]).join(" / ") || "—"} · {config[k]?.format || "standard"}
))}
)}
{msg && ( )} {dirty && !msg && 有未儲存的變更}
); } // ---------- A5 Release Note 草稿審核 ---------- const DRAFT_PRODUCT_LABEL = { VF: "PredictGo", PG: "Predict Gaming" }; function DraftItemRow({ item, onChange, onRemove, product }) { return (
onChange({ ...item, name: e.target.value })} className="flex-1 h-8 px-2.5 bg-surface2 border border-border rounded-md text-fg text-[13px] outline-none focus:border-borderStrong" />