Stack Monitoring

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_106":107,"_108":109},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","Steven_Jin","name","Aguking_Stack","path","ui.ts","project",{"_22":45,"_11":12,"_33":46,"_47":-5,"_48":42,"_49":50,"_51":50,"_52":-5,"_53":-5,"_54":55,"_56":57,"_58":32,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":42},"file",{"_22":23,"_11":14,"_24":25,"_26":-5,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":-5,"_13":44},"permalink","https://www.val.town/x/Steven_Jin/Aguking_Stack/code/ui.ts","extension","id","cd345a3e-9b73-4cb7-96df-1be8d611a279","fileId","6ac4b584-adf5-11f1-a55f-1607ee4eb77e","parentId","branchId","a669a274-1d8e-4aec-b258-6ada72f2e9bb","branchVersion",396,"latest",true,"createdAt",["D",1789477376229],"version",13,"fileType","script","content","// ver.4.4 ui.ts — 화면(HTML/CSS/JS)과 공통 상수. main.ts 에서 import 해서 쓴다.\n// main.ts 와 반드시 같은 버전끼리 배포할 것. (import 이름이 하나만 어긋나도 전체가 멈춘다)\nexport const EMOJI_MAP: Record = {\n \"금연\": \"🚭\",\n \"흡연\": \"🚬\",\n \"먹어\": \"🍚\",\n \"먹지마\": \"🚫\",\n \"짠\": \"🍻\",\n \"오늘의 재미\": \"🤣\",\n \"무서움 지수\": \"👻\",\n \"문어\": \"🐙\",\n \"꽃게\": \"🦀\",\n \"소라\": \"🐚\",\n};\nexport const PRIMARY_CHANNEL = \"암본이수혁aguking\";\nexport const AUTO_REFRESH_INTERVAL_MS = 15000;\nconst CLIENT_COMMON_JS = `\nlet timer = null;\nfunction setStatus(msg, isErr) {\n statusEl.textContent = msg;\n statusEl.className = \"status\" + (isErr ? \" err\" : \"\");\n}\nfunction formatCount(raw) {\n if (raw === \"\" || raw === null || raw === undefined) return \"\";\n const n = Number(raw);\n if (!Number.isFinite(n)) return String(raw);\n return n.toLocaleString(\"en-US\", { maximumFractionDigits: 6 });\n}\nfunction errorMessage(e) {\n return e && e.message ? e.message : \"알 수 없는 오류\";\n}\nasync function fetchJson(path, options) {\n const res = await fetch(path, {\n cache: \"no-store\",\n credentials: \"same-origin\",\n ...(options || {})\n });\n const text = await res.text();\n let data = null;\n try {\n data = text ? JSON.parse(text) : null;\n } catch {}\n if (!res.ok || !data || data.ok === false) {\n const detail = data && (data.message || data.error);\n throw new Error(detail || (\"HTTP \" + res.status + (text ? \": \" + text : \"\")));\n }\n return data;\n}\nfunction bindCommonControls(load) {\n document.getElementById(\"loadBtn\").onclick = load;\n document.getElementById(\"autoRefresh\").onchange = e => {\n clearInterval(timer);\n timer = e.target.checked ? setInterval(load, ${AUTO_REFRESH_INTERVAL_MS}) : null;\n };\n chInput.addEventListener(\"keydown\", e => {\n if (e.key === \"Enter\") load();\n });\n}\n`;\n\n// Monitor / Admin 공통 CSS (History 는 테마 변수 구조가 달라 별도 유지)\nconst BASE_CSS = `\n:root { --bg:#f5f8fc; --panel:#fff; --line:#dde6f0; --text:#1c2733; --dim:#7891a8; --accent:#3b82f6; --input-bg:#eef3f9; --danger:#e0455a; }\n* { box-sizing:border-box; }\nbody { margin:0; background:var(--bg); color:var(--text); font-family:\"SF Mono\",\"D2Coding\",Consolas,monospace; padding:24px 16px 60px; min-height:100vh; }\n.wrap { max-width:560px; margin:0 auto; }\nh1 { font-size:15px; font-weight:600; letter-spacing:.02em; color:var(--dim); margin:0; }\nh1 span { color:var(--accent); }\n.panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:14px; box-shadow:0 1px 2px rgba(59,130,246,.06); }\nlabel { display:block; font-size:12px; color:var(--dim); margin-bottom:6px; }\n.row { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }\ninput[type=\"text\"], input[type=\"number\"], select { flex:1; min-width:0; background:var(--input-bg); border:1px solid var(--line); border-radius:6px; color:var(--text); padding:9px 10px; font-family:inherit; font-size:16px; }\ninput[type=\"text\"]:focus, input[type=\"number\"]:focus, select:focus { outline:none; border-color:var(--accent); }\nbutton { background:var(--accent); color:#fff; border:none; border-radius:6px; padding:9px 14px; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; min-height:40px; }\nbutton:hover { filter:brightness(1.08); }\nbutton.ghost { background:transparent; color:var(--dim); border:1px solid var(--line); font-weight:500; }\nbutton.ghost:hover { color:var(--text); border-color:var(--accent); }\n.toolbar { display:flex; align-items:center; justify-content:space-between; margin-top:4px; flex-wrap:wrap; gap:8px; }\n.auto { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--dim); }\n.auto input { accent-color:var(--accent); }\n.status { font-size:12px; color:var(--dim); margin:10px 0 4px; min-height:16px; white-space:pre-wrap; word-break:break-word; }\n.status.err { color:var(--danger); }\n.items { display:flex; flex-direction:column; gap:8px; }\n.item { display:flex; align-items:baseline; justify-content:space-between; background:var(--input-bg); border:1px solid var(--line); border-radius:8px; padding:10px 12px; gap:8px; }\n.item .name { font-size:14px; word-break:break-word; }\n.item .count { font-size:14px; font-weight:700; color:var(--accent); }\n.empty { text-align:center; color:var(--dim); font-size:13px; padding:28px 0; }\n@media (max-width:380px) { body { padding:16px 12px 48px; } }\n`;\n\nexport function label(item: string): string {\n const emoji = EMOJI_MAP[item];\n return emoji ? `${emoji} ${item}` : item;\n}\n\n// Channel Validation Helpers (Patched)\n\nconst MAX_CHANNEL_LENGTH = 100;\nconst MAX_ITEM_LENGTH = 100;\n\nexport function toNfc(value: string): string {\n try {\n return String(value ?? \"\").normalize(\"NFC\");\n } catch {\n return String(value ?? \"\");\n }\n}\n\nexport function normalizeChannel(channel: string): string {\n const trimmed = toNfc(String(channel ?? \"\").trim());\n // 예전 채널명(띄어쓰기 포함)으로 들어온 요청도 같은 데이터를 쓴다.\n return trimmed === \"암본이수혁 aguking\" ? PRIMARY_CHANNEL : trimmed;\n}\n\nexport function isSafeChannelName(channel: string): boolean {\n return (\n typeof channel === \"string\" &&\n channel.length > 0 &&\n channel.length <= MAX_CHANNEL_LENGTH &&\n !/[\\x00-\\x1F\\x7F]/.test(channel)\n );\n}\n\nexport function isSafeItemName(item: string): boolean {\n return (\n typeof item === \"string\" &&\n item.length > 0 &&\n item.length <= MAX_ITEM_LENGTH &&\n !/[\\x00-\\x1F\\x7F]/.test(item)\n );\n}\n\n// Monitor HTML\n\nexport const MONITOR_HTML = `\n\n\n\n\nStack Monitoring\n\n\n\n

\n\n

\n채널\n

\n \n \n

\n\n

\n 불러오는 중...\n

\n\n

\n\n\n`;\n\n// 관리 패널 (로그인한 관리자에게만 내려간다)\n\nconst ADMIN_SIDE_HTML = ``;\n\nconst ADMIN_SIDE_JS = `\n// ---------- 관리 패널 ----------\nconst stackItemsEl = document.getElementById(\"stackItems\");\nconst stackCountEl = document.getElementById(\"stackCount\");\nconst newItemSelect = document.getElementById(\"newItem\");\nconst newItemCustom = document.getElementById(\"newItemCustom\");\nconst maintenanceToggle = document.getElementById(\"maintenanceToggle\");\nconst maintenanceStatusEl = document.getElementById(\"maintenanceStatus\");\n\nfunction renderMaintenanceStatus(on) {\n maintenanceStatusEl.textContent =\n on\n ? \"🔧 ON - 나이트봇 요청에는 점검 안내 문구만 응답합니다.\"\n : \"정상 작동 중입니다.\";\n}\nasync function loadMaintenanceStatus() {\n try {\n const data = await fetchJson(API + \"admin/maintenance-status\");\n maintenanceToggle.checked = !!data.on;\n renderMaintenanceStatus(!!data.on);\n } catch (e) {\n maintenanceStatusEl.textContent = \"점검 모드 상태 오류: \" + errorMessage(e);\n }\n}\nmaintenanceToggle.addEventListener(\"change\", async e => {\n const on = e.target.checked;\n maintenanceStatusEl.textContent = \"변경 중...\";\n try {\n const data = await fetchJson(API + \"admin/maintenance\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ on })\n });\n maintenanceToggle.checked = !!data.on;\n renderMaintenanceStatus(!!data.on);\n } catch (err) {\n maintenanceStatusEl.textContent = \"변경 실패: \" + errorMessage(err);\n maintenanceToggle.checked = !on;\n }\n});\n\nfunction looksLikeNameWithNumber(name) {\n return /(^|\\\\s)-?\\\\d+(?:\\\\.\\\\d+)?$/.test(name.trim());\n}\n// 0보다 큰 숫자면 서버로 보낼 문자열을, 아니면 null을 돌려준다.\nfunction parseAmount(raw) {\n const s = String(raw).trim();\n if (!/^\\\\d+(?:\\\\.\\\\d+)?$/.test(s)) return null;\n const n = Number(s);\n if (!Number.isFinite(n) || n <= 0) return null;\n return s;\n}\n\n// 기록을 불러온 뒤 이어서 호출된다. 성공했을 때는 상태 문구를 덮어쓰지 않는다.\nasync function loadStack() {\n const ch = chInput.value.trim();\n if (!ch) return;\n try {\n const data = await fetchJson(API + \"api/stack?ch=\" + encodeURIComponent(ch));\n renderStack(data.items || []);\n } catch (e) {\n stackItemsEl.replaceChildren();\n stackCountEl.textContent = \"\";\n setStatus(\"스택 불러오기 실패: \" + errorMessage(e), true);\n }\n}\n\nfunction renderStack(items) {\n stackItemsEl.replaceChildren();\n stackCountEl.textContent = items.length ? items.length + \"개\" : \"\";\n if (!items.length) {\n const empty = document.createElement(\"p\");\n empty.className = \"side-note\";\n empty.style.margin = \"0\";\n empty.textContent = \"🤖 현재 스택 없음.\";\n stackItemsEl.appendChild(empty);\n return;\n }\n items.forEach(it => {\n const displayName = it.label || it.item;\n const row = document.createElement(\"div\");\n row.className = \"stack-item\";\n\n const nameBtn = document.createElement(\"button\");\n nameBtn.type = \"button\";\n nameBtn.className = \"name\";\n nameBtn.textContent = displayName;\n nameBtn.title = \"이 항목의 기록만 보기\";\n nameBtn.onclick = () => focusItem(it.item);\n\n const countEl = document.createElement(\"span\");\n countEl.className = \"count\";\n countEl.textContent = formatCount(it.count);\n\n const btns = document.createElement(\"div\");\n btns.className = \"btns\";\n const stepInput = document.createElement(\"input\");\n stepInput.type = \"number\";\n stepInput.className = \"step\";\n stepInput.value = \"1\";\n stepInput.step = \"any\";\n stepInput.min = \"0.01\";\n stepInput.inputMode = \"decimal\";\n stepInput.setAttribute(\"aria-label\", displayName + \" 수량\");\n const minusBtn = document.createElement(\"button\");\n minusBtn.type = \"button\";\n minusBtn.className = \"ghost small\";\n minusBtn.textContent = \"차감\";\n const plusBtn = document.createElement(\"button\");\n plusBtn.type = \"button\";\n plusBtn.className = \"small\";\n plusBtn.textContent = \"추가\";\n const delBtn = document.createElement(\"button\");\n delBtn.type = \"button\";\n delBtn.className = \"ghost danger small\";\n delBtn.textContent = \"삭제\";\n btns.appendChild(stepInput);\n btns.appendChild(minusBtn);\n btns.appendChild(plusBtn);\n btns.appendChild(delBtn);\n\n row.appendChild(nameBtn);\n row.appendChild(countEl);\n row.appendChild(btns);\n\n const getStep = () => {\n const amount = parseAmount(stepInput.value);\n if (amount === null) {\n setStatus(\"수량은 0 보다 큰 숫자만 입력할 수 있습니다.\", true);\n }\n return amount;\n };\n plusBtn.onclick = () => {\n const amount = getStep();\n if (amount === null) return;\n if (looksLikeNameWithNumber(it.item) && !confirm(\n \"이 항목의 실제 이름이 \\\\\"\" + it.item + \"\\\\\" 입니다. \" +\n \"이름 끝에 숫자가 포함되어 있는데, 이 이름 그대로 계속 추가할까요?\\\\n\" +\n \"(잘못 생성된 항목이면 취소를 누르고 먼저 삭제 후 새로 추가하세요.)\"\n )) {\n return;\n }\n runAction(\"추가\", it.item, amount);\n };\n minusBtn.onclick = () => {\n const amount = getStep();\n if (amount === null) return;\n runAction(\"차감\", it.item, amount);\n };\n delBtn.onclick = () => {\n if (confirm(displayName + \" 항목을 완전히 삭제할까요?\")) {\n runAction(\"삭제\", it.item);\n }\n };\n stackItemsEl.appendChild(row);\n });\n}\n\nasync function runAction(action, item, amount) {\n const ch = chInput.value.trim();\n if (!ch) {\n setStatus(\"채널을 입력해주세요.\", true);\n return;\n }\n const body = { channel: ch, action };\n if (item !== undefined) body.item = item;\n if (amount !== undefined) body.amount = amount;\n setStatus(\"처리 중...\");\n try {\n const data = await fetchJson(API + \"api/stack\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify(body)\n });\n // 기록초기화 뒤에는 서버 응답이 비므로 etag 캐시를 버리고 새로 받는다.\n state.etag = \"\";\n await load();\n setStatus(\"처리 완료 : \" + data.message);\n } catch (e) {\n setStatus(\"처리 실패: \" + errorMessage(e), true);\n }\n}\n\nnewItemSelect.onchange = () => {\n const isCustom = newItemSelect.value === \"__custom__\";\n newItemCustom.style.display = isCustom ? \"\" : \"none\";\n if (isCustom) newItemCustom.focus();\n};\nnewItemCustom.addEventListener(\"keydown\", e => {\n if (e.key === \"Enter\") document.getElementById(\"addBtn\").click();\n});\nfunction validateNewItemName(name) {\n if (!name) {\n setStatus(\"항목 이름을 입력해주세요.\", true);\n return false;\n }\n if (looksLikeNameWithNumber(name)) {\n setStatus(\n \"항목 이름(\\\\\"\" + name + \"\\\\\") 끝에 숫자가 포함되어 있습니다. \" +\n \"이름과 수량은 반드시 분리된 칸에 각각 입력해주세요.\",\n true\n );\n return false;\n }\n return true;\n}\nfunction getNewItemName() {\n const isCustom = newItemSelect.value === \"__custom__\";\n return isCustom ? newItemCustom.value.trim() : newItemSelect.value;\n}\nfunction submitNewItem(action) {\n const name = getNewItemName();\n if (!validateNewItemName(name)) return;\n const raw = document.getElementById(\"newAmount\").value;\n const amount = parseAmount(raw);\n if (amount === null) {\n setStatus(\n \"수량은 0 보다 큰 숫자만 입력할 수 있습니다. (입력값: \\\\\"\" + raw + \"\\\\\")\",\n true\n );\n return;\n }\n runAction(action, name, amount);\n if (newItemSelect.value === \"__custom__\") newItemCustom.value = \"\";\n}\ndocument.getElementById(\"addBtn\").onclick = () => submitNewItem(\"추가\");\ndocument.getElementById(\"subBtn\").onclick = () => submitNewItem(\"차감\");\ndocument.getElementById(\"resetBtn\").onclick = () => {\n const ch = chInput.value.trim();\n if (!ch) {\n setStatus(\"채널을 입력해주세요.\", true);\n return;\n }\n if (confirm(ch + \" 채널의 모든 항목을 초기화할까요? 되돌릴 수 없습니다.\")) {\n runAction(\"초기화\");\n }\n};\ndocument.getElementById(\"resetHistoryBtn\").onclick = () => {\n const ch = chInput.value.trim();\n if (!ch) {\n setStatus(\"채널을 입력해주세요.\", true);\n return;\n }\n if (confirm(ch + \" 채널의 기록(History)을 모두 삭제할까요? 되돌릴 수 없습니다.\")) {\n runAction(\"기록초기화\");\n }\n};\n\nloadAdmin = loadStack;\nloadMaintenanceStatus();\n`;\n\n// 통합 화면 (/admin)\n// 히스토리를 기본으로 두고, 로그인한 관리자에게만 오른쪽 관리 패널을 함께 내려준다.\n// 비로그인 방문자에게는 관리 패널의 HTML 자체를 보내지 않는다.\n\nexport function renderAdminHtml(isAdmin: boolean): string {\n return `\n\n\n\n\nStack ${isAdmin ? \"Admin\" : \"History\"}\n\n\n\n\n

\n\n\n

\n 채널\n

\n \n \n

\n \n

\n\n

기록을 불러오는 중...

\n\n

\n\n${isAdmin ? ADMIN_SIDE_HTML : \"\"}\n

\n\n\n\n\n\n`;\n}","deleted",false,"label",[14],"9d4dc10d-0136-4985-94f6-6b0bf535e31e",["D",1787817154621],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","d7bd44ad-648e-46fe-b25e-97dc3e998420","pinnedFileId","e746b2fa-a4ff-11f1-8cae-1607ee4eb77e","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","01a04226-b52a-76ab-bc3d-16937b891876","tursoName","9d4dc10d0136498594f66b0bf535e31e","tursoHostname","9d4dc10d0136498594f66b0bf535e31e-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789497078049],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_105":101},"org",{"_9":10,"_98":99,"_100":101,"_54":55,"_102":103,"_104":42},"branch",{"_35":88,"_11":89,"_22":28,"_90":45,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":12,"_97":10},"isOwned",397,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Steven-J-KY","avatar","https://avatars.githubusercontent.com/u/321694553?v=4","tier","free","canRestrictVals","profileImageUrl","ctx",{"_81":-5,"_139":140,"_141":142,"_143":144,"_145":42,"_146":42,"_147":42,"_148":32,"_149":-5,"_150":-7,"_151":-7,"_152":62,"_153":42,"_154":42,"_155":-5,"_156":42,"_157":42,"_158":42,"_159":-5},"ENV",{"_110":111,"_112":113,"_114":89,"_115":116,"_117":118,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Stack Monitoring · aguking-stack

Stack ${\n isAdmin ? \"Admin\" : \"History\"\n } · aguking-stack