pulse-for-claude-code 0.1.0

package/public/style.css

@@ -0,0 +1,577 @@
+/* ===== Pulse for Claude Code ===== */
+
+:root {
+  --accent: #d97757;
+  --accent-soft: rgba(217, 119, 87, 0.14);
+  --accent-line: rgba(217, 119, 87, 0.4);
+  --ok: #6a9a78;
+  --warn: #d9a157;
+  --danger: #cc6b5a;
+  --radius: 14px;
+  --maxw: 1120px;
+  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
+  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
+}
+
+html[data-theme="dark"] {
+  --bg: #1f1e1b;
+  --surface: #292824;
+  --surface-2: #322f2a;
+  --text: #eceae1;
+  --muted: #9a988e;
+  --faint: #6f6d64;
+  --hairline: rgba(255, 255, 255, 0.10);
+  --track: rgba(255, 255, 255, 0.08);
+}
+html[data-theme="light"] {
+  --bg: #faf9f5;
+  --surface: #ffffff;
+  --surface-2: #f4f2ec;
+  --text: #20201c;
+  --muted: #73726b;
+  --faint: #a3a199;
+  --hairline: rgba(20, 20, 15, 0.10);
+  --track: rgba(20, 20, 15, 0.07);
+}
+
+* { box-sizing: border-box; }
+/* the hidden attribute must always win, even over display:grid/flex below */
+[hidden] { display: none !important; }
+html, body { margin: 0; }
+body {
+  font-family: var(--sans);
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  font-size: 15px;
+}
+button { font-family: inherit; cursor: pointer; }
+canvas { display: block; width: 100%; }
+
+/* ===== Topbar ===== */
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  padding: 14px 24px;
+  background: color-mix(in srgb, var(--bg) 82%, transparent);
+  backdrop-filter: saturate(160%) blur(12px);
+  border-bottom: 1px solid var(--hairline);
+}
+.brand { display: flex; align-items: center; gap: 8px; }
+.brand__mark { border-radius: 6px; }
+.brand__name { font-weight: 600; letter-spacing: -0.01em; }
+.brand__sub { color: var(--muted); font-size: 13px; }
+
+.tabs { display: flex; gap: 2px; margin: 0 auto 0 12px; }
+.tab {
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  font-size: 14px;
+  padding: 7px 13px;
+  border-radius: 9px;
+  transition: color .15s, background .15s;
+}
+.tab:hover { color: var(--text); }
+.tab.is-active { color: var(--text); background: var(--surface-2); }
+
+.topbar__right { display: flex; align-items: center; gap: 12px; }
+.plan {
+  font-size: 12px;
+  color: var(--accent);
+  background: var(--accent-soft);
+  padding: 4px 9px;
+  border-radius: 7px;
+  text-transform: lowercase;
+}
+.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
+.live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: ping 2.4s ease-out infinite; }
+.live.is-stale .live__dot { background: var(--faint); animation: none; }
+@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(106,154,120,.5);} 70%,100% { box-shadow: 0 0 0 6px rgba(106,154,120,0);} }
+.icon-btn {
+  border: 1px solid var(--hairline);
+  background: var(--surface);
+  color: var(--text);
+  width: 32px; height: 32px;
+  border-radius: 9px;
+  font-size: 15px;
+}
+.ready { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
+.ready__ring { transform: rotate(-90deg); }
+.ready__bg { fill: none; stroke: var(--track); stroke-width: 3; }
+.ready__fg {
+  fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round;
+  stroke-dasharray: 94.25; stroke-dashoffset: 94.25;
+  transition: stroke-dashoffset .6s var(--ease), stroke .3s var(--ease);
+}
+.ready__pct { font-variant-numeric: tabular-nums; min-width: 30px; }
+.ready.is-done .ready__fg { stroke: var(--ok); }
+.ready.is-done .ready__pct { color: var(--ok); }
+body.office-mode .ready { color: #cfcdc3; }
+
+.rank {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--accent);
+  background: var(--accent-soft);
+  padding: 5px 10px;
+  border-radius: 7px;
+  white-space: nowrap;
+}
+.plan-select {
+  appearance: none;
+  border: 1px solid var(--hairline);
+  background: var(--surface);
+  color: var(--text);
+  font: inherit;
+  font-size: 13px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+/* ===== Waiting banner ===== */
+.waiting {
+  display: flex; align-items: center; gap: 12px;
+  max-width: var(--maxw); margin: 16px auto 0; padding: 14px 18px;
+  background: var(--accent-soft);
+  border: 1px solid var(--accent-line);
+  border-radius: var(--radius);
+}
+.waiting__pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: ping2 1.3s ease-out infinite; flex: none; }
+@keyframes ping2 { 0% { box-shadow: 0 0 0 0 rgba(217,119,87,.6);} 70%,100% { box-shadow: 0 0 0 8px rgba(217,119,87,0);} }
+.waiting__text { font-weight: 500; }
+.waiting__meta { color: var(--muted); font-size: 13px; margin-left: auto; }
+
+/* ===== Approvals (Allow / Allow all / Deny) ===== */
+.approvals { max-width: var(--maxw); margin: 16px auto 0; padding: 0 24px; display: flex; flex-direction: column; gap: 10px; }
+.appr {
+  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
+  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 14px; padding: 14px 18px;
+}
+.appr__info { font-size: 14px; min-width: 0; }
+.appr__tool { font-weight: 600; color: var(--accent); }
+.appr__proj { color: var(--faint); font-size: 12px; }
+.appr__sum { margin-top: 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--muted); word-break: break-word; }
+.appr__btns { display: flex; gap: 8px; flex: none; }
+.abtn { border: 1px solid var(--hairline); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 9px; cursor: pointer; transition: transform .15s var(--ease); }
+.abtn:hover { transform: translateY(-1px); }
+.abtn--allow { background: var(--accent); color: #fff; border-color: var(--accent); }
+.abtn--all { color: var(--accent); border-color: var(--accent-line); }
+.abtn--deny:hover { border-color: var(--danger); color: var(--danger); }
+.office__now { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
+
+/* the approval card pulses to catch your eye */
+.appr { animation: apprpulse 1.7s ease-in-out infinite; }
+@keyframes apprpulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 87, 0); }
+  50% { box-shadow: 0 0 0 5px rgba(217, 119, 87, 0.18); }
+}
+body.office-mode .appr { padding: 18px 22px; font-size: 15px; }
+body.office-mode .abtn { padding: 12px 20px; font-size: 15px; }
+
+/* ===== Layout ===== */
+.main { max-width: var(--maxw); margin: 0 auto; padding: 22px 24px 40px; }
+.panel { display: none; }
+.panel.is-active { display: block; animation: fade .25s ease; }
+@keyframes fade { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: none; } }
+
+.card {
+  background: var(--surface);
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius);
+  padding: 18px 20px;
+  margin-bottom: 16px;
+}
+.card__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
+.card__title { font-weight: 500; }
+.card__hint { color: var(--muted); font-size: 13px; }
+.card--active { min-height: 150px; }
+.chart { cursor: crosshair; }
+
+/* segmented period control */
+.seg { display: inline-flex; gap: 2px; background: var(--surface-2); padding: 2px; border-radius: 8px; }
+.seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
+.seg button:hover { color: var(--text); }
+.seg button.is-on { background: var(--surface); color: var(--text); }
+
+/* hover tooltip for charts */
+.tip {
+  position: fixed; z-index: 200; pointer-events: none;
+  background: var(--surface); border: 1px solid var(--hairline);
+  border-radius: 8px; padding: 7px 10px; font-size: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+}
+.tip__label { color: var(--muted); }
+.tip__val { color: var(--text); font-variant-numeric: tabular-nums; margin-top: 2px; }
+
+.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
+.ov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+
+/* ===== Stat cards ===== */
+.stat {
+  background: var(--surface);
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius);
+  padding: 16px 18px;
+}
+.stat__label { color: var(--muted); font-size: 13px; }
+.stat__value { font-family: var(--serif); font-size: 34px; line-height: 1.1; margin-top: 8px; letter-spacing: -0.01em; }
+.stat__value small { font-size: 17px; color: var(--muted); font-family: var(--sans); }
+.stat__sub { color: var(--muted); font-size: 13px; margin-top: 6px; }
+.stat__bar { margin-top: 12px; }
+
+/* ===== Bars ===== */
+.bar { height: 8px; background: var(--track); border-radius: 6px; overflow: hidden; }
+.bar__fill { height: 100%; background: var(--accent); border-radius: 6px; transition: width .4s ease; }
+.bar__fill.is-ok { background: var(--ok); }
+.bar__fill.is-warn { background: var(--warn); }
+.bar__fill.is-danger { background: var(--danger); }
+
+/* per-session context rows */
+.ctxrow { margin: 15px 0; }
+.ctxrow__top { display: flex; justify-content: space-between; gap: 14px; align-items: center; font-size: 14px; margin-bottom: 7px; }
+.ctxrow__name { display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ctxrow__name small { color: var(--muted); }
+.ctxrow__val { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+
+.num { cursor: pointer; border-bottom: 1px dotted var(--faint); }
+.num:hover { color: var(--accent); border-bottom-color: var(--accent-line); }
+
+.limitrow { margin: 16px 0; }
+.limitrow__top { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 7px; }
+.limitrow__name { color: var(--text); }
+.limitrow__reset { margin-top: 6px; font-size: 12px; color: var(--faint); }
+.limitrow__val { color: var(--muted); }
+.limitrow__val b { color: var(--text); font-weight: 500; }
+
+/* ===== Active session ===== */
+.act__title { font-weight: 500; font-size: 16px; margin-bottom: 4px; }
+.act__row { display: flex; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 13px; margin-top: 8px; }
+.chip { background: var(--surface-2); padding: 3px 9px; border-radius: 7px; font-size: 12px; color: var(--muted); }
+.chip--accent { background: var(--accent-soft); color: var(--accent); }
+.act__prompt { margin-top: 12px; color: var(--muted); font-size: 13px; border-left: 2px solid var(--hairline); padding-left: 12px; }
+
+/* ===== Tables / lists ===== */
+.table { width: 100%; }
+.trow {
+  display: grid;
+  grid-template-columns: 16px 1fr 110px 90px 90px 90px;
+  gap: 12px;
+  align-items: center;
+  padding: 11px 4px;
+  border-top: 1px solid var(--hairline);
+  font-size: 14px;
+}
+.trow:first-child { border-top: 0; }
+.trow__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.trow__title small { color: var(--muted); }
+.trow__num { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
+.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
+.dot.is-on { background: var(--ok); }
+
+/* breakdown list */
+.brk { margin: 10px 0; }
+.brk__top { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
+.brk__name { text-transform: capitalize; }
+.brk__val { color: var(--muted); font-variant-numeric: tabular-nums; }
+
+/* composition */
+.comp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
+.comp__item { text-align: left; }
+.comp__k { color: var(--muted); font-size: 13px; }
+.comp__v { font-family: var(--serif); font-size: 22px; margin-top: 4px; }
+
+/* ===== Activity feed ===== */
+.feed { display: flex; flex-direction: column; }
+.fitem { display: grid; grid-template-columns: 70px 88px 1fr 110px; gap: 12px; align-items: center; padding: 9px 2px; border-top: 1px solid var(--hairline); font-size: 13px; }
+.fitem:first-child { border-top: 0; }
+.fitem__time { color: var(--faint); font-variant-numeric: tabular-nums; }
+.ftag { font-size: 12px; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 6px; text-align: center; }
+.fitem__hint { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
+.fitem__proj { color: var(--faint); text-align: right; }
+
+/* ===== focusable metrics + focus overlay ===== */
+[data-focus] { cursor: zoom-in; }
+.focus {
+  position: fixed; inset: 0; z-index: 100;
+  display: grid; place-items: center;
+  background: color-mix(in srgb, var(--bg) 55%, transparent);
+  backdrop-filter: blur(14px) saturate(120%);
+  -webkit-backdrop-filter: blur(14px) saturate(120%);
+  animation: fade .2s ease;
+}
+.focus__card { text-align: center; padding: 40px; }
+.focus__label { color: var(--muted); font-size: 16px; letter-spacing: .02em; }
+.focus__value {
+  font-family: var(--serif);
+  font-size: clamp(48px, 11vw, 132px);
+  line-height: 1.02; letter-spacing: -0.02em;
+  margin: 12px 0 6px; font-variant-numeric: tabular-nums;
+}
+.focus__sub { color: var(--muted); font-size: 16px; }
+.focus__hint { color: var(--faint); font-size: 12px; margin-top: 28px; }
+
+/* ===== clickable rows ===== */
+.trow--link, .ctxrow--link { cursor: pointer; border-radius: 8px; }
+.trow--link:hover { background: var(--surface-2); }
+.ctxrow--link:hover .ctxrow__name { color: var(--accent); }
+
+/* ===== session detail ===== */
+.back {
+  border: 1px solid var(--hairline);
+  background: var(--surface);
+  color: var(--muted);
+  font: inherit; font-size: 13px;
+  padding: 7px 13px; border-radius: 9px; margin-bottom: 16px;
+}
+.back:hover { color: var(--text); }
+.sdetail__title { font-family: var(--serif); font-size: 26px; letter-spacing: -0.01em; line-height: 1.15; }
+
+.turns { display: flex; flex-direction: column; gap: 12px; }
+.turn {
+  background: var(--surface);
+  border: 1px solid var(--hairline);
+  border-radius: var(--radius);
+  padding: 16px 18px;
+}
+.turn__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
+.turn__idx { font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }
+.turn__meta { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
+.turn__prompt {
+  font-size: 15px;
+  border-left: 2px solid var(--accent-line);
+  padding-left: 12px;
+  margin-bottom: 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.turn__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
+.saction { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
+.saction__hint {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px; color: var(--muted);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px;
+}
+.turn__text { color: var(--muted); font-size: 14px; white-space: pre-wrap; word-break: break-word; }
+
+.note { color: var(--faint); font-size: 12px; margin: 14px 0 0; }
+.empty { color: var(--muted); font-size: 14px; padding: 20px 0; text-align: center; }
+
+/* search across sessions */
+.search {
+  width: 100%; margin: 4px 0 12px; padding: 10px 12px;
+  background: var(--surface-2); border: 1px solid var(--accent-line);
+  border-radius: 9px; color: var(--text); font-size: 14px; outline: none;
+}
+.search::placeholder { color: var(--muted); }
+.search:focus { border-color: var(--accent); }
+.sr { padding: 11px 10px; border-top: 1px solid var(--surface-2); cursor: pointer; border-radius: 8px; }
+.sr:hover { background: var(--surface-2); }
+.sr__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
+.sr__title { color: var(--text); font-size: 14px; }
+.sr__title small { color: var(--muted); }
+.sr__count { color: var(--accent); font-size: 12px; white-space: nowrap; }
+.sr__snip { color: var(--muted); font-size: 13px; margin-top: 4px; line-height: 1.45; }
+.sr__who { color: var(--accent); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
+.sr mark, .sr__snip mark { background: var(--accent-soft); color: var(--accent); border-radius: 3px; padding: 0 2px; }
+.search-row { display: flex; gap: 8px; align-items: center; }
+.search-row .search { flex: 1; }
+.search-project {
+  padding: 9px 10px; background: var(--surface-2); border: 1px solid var(--accent-line);
+  border-radius: 9px; color: var(--text); font-size: 13px; margin: 4px 0 12px;
+}
+.card__action { margin-left: auto; color: var(--accent); text-decoration: none; font-size: 12px; }
+.card__action:hover { text-decoration: underline; }
+
+.foot a { color: var(--accent); text-decoration: none; }
+
+/* ===== Footer ===== */
+.foot { max-width: var(--maxw); margin: 0 auto; padding: 18px 24px 30px; color: var(--faint); font-size: 12px; display: flex; gap: 10px; }
+.foot__sep { opacity: .5; }
+
+/* ===== Office / crab scene ===== */
+.office { display: flex; flex-direction: column; align-items: center; padding: 16px 0 40px; }
+.office__scene { width: 100%; max-width: 560px; }
+.scene-svg { width: 100%; height: auto; display: block; }
+
+.room-window { fill: var(--accent-soft); stroke: var(--hairline); stroke-width: 2; }
+.room-line { stroke: var(--hairline); stroke-width: 2; }
+.desk { fill: var(--surface-2); }
+.body { fill: var(--accent); }
+.leg, .arm { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; }
+.claw-shape { fill: var(--accent); }
+.stalk { stroke: var(--accent); stroke-width: 5; stroke-linecap: round; }
+.eye-white { fill: #fff; stroke: rgba(0, 0, 0, 0.08); stroke-width: 1; }
+.pupil { fill: #1a1a17; transition: transform .5s var(--ease); }
+.mouth { fill: none; stroke: rgba(0, 0, 0, 0.32); stroke-width: 3; stroke-linecap: round; }
+.laptop-base { fill: var(--surface-2); stroke: var(--hairline); stroke-width: 1; }
+.screen { fill: #201f1b; }
+.code-line { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; opacity: .5; }
+
+#crab, .claw-l, .claw-r { transform-box: fill-box; transform-origin: center; }
+#crab { transition: transform .5s var(--ease); }
+
+.bubble { opacity: 0; transition: opacity .4s var(--ease); }
+.bubble-bg { fill: var(--surface); stroke: var(--accent-line); stroke-width: 2; }
+.bubble-mark { fill: var(--accent); font-size: 26px; font-weight: 600; font-family: var(--sans); }
+.check { fill: none; stroke: var(--ok); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
+.dot { fill: var(--accent); }
+
+#crab-scene.is-thinking #crab, #crab-scene.is-working #crab, #crab-scene.is-idle #crab { animation: bob 3.6s ease-in-out infinite; }
+#crab-scene.is-working .pupil, #crab-scene.is-thinking .pupil { transform: translateY(5px); }
+#crab-scene.is-waiting .pupil, #crab-scene.is-idle .pupil { transform: translateY(0); }
+#crab-scene.is-waiting #crab { animation: lookbob 1.1s ease-in-out infinite; }
+#crab-scene.is-done #crab { animation: happy 1.7s ease-in-out infinite; }
+
+#crab-scene.is-thinking .bubble-think, #crab-scene.is-working .bubble-think { opacity: 1; }
+#crab-scene.is-waiting .bubble-wait { opacity: 1; }
+#crab-scene.is-done .bubble-done { opacity: 1; }
+
+#crab-scene.is-working .claw-l { animation: tap .5s ease-in-out infinite; }
+#crab-scene.is-working .claw-r { animation: tap .5s ease-in-out infinite .25s; }
+#crab-scene.is-working .code-line { animation: codeblink 1.4s steps(1, end) infinite; }
+#crab-scene.is-working .c2 { animation-delay: .35s; }
+#crab-scene.is-working .c3 { animation-delay: .7s; }
+.bubble-think .d1 { animation: dotp 1.2s ease-in-out infinite; }
+.bubble-think .d2 { animation: dotp 1.2s ease-in-out infinite .2s; }
+.bubble-think .d3 { animation: dotp 1.2s ease-in-out infinite .4s; }
+
+@keyframes bob { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-6px);} }
+@keyframes lookbob { 0%,100% { transform: translateY(0) scale(1.03);} 50% { transform: translateY(-4px) scale(1.03);} }
+@keyframes happy { 0%,100% { transform: rotate(-2.5deg);} 50% { transform: rotate(2.5deg);} }
+@keyframes tap { 0%,100% { transform: rotate(0);} 50% { transform: rotate(-13deg);} }
+@keyframes codeblink { 0%,45% { opacity:.45;} 50%,100% { opacity:.9;} }
+@keyframes dotp { 0%,100% { opacity:.3;} 50% { opacity:1;} }
+
+.office__status { text-align: center; margin-top: 4px; }
+.office__state { font-family: var(--serif); font-size: 30px; letter-spacing: -0.01em; }
+.appr-toggle { border: 1px solid var(--hairline); background: var(--surface); color: var(--muted); font: inherit; font-size: 12px; padding: 6px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
+.appr-toggle.is-on { color: #fff; background: var(--accent); border-color: var(--accent); }
+.appr-toggle.is-allowall { color: #1c1b19; background: #d9a154; border-color: #d9a154; }
+.office__eta { font-size: 16px; color: var(--accent); margin-top: 8px; min-height: 20px; }
+.office__sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
+
+/* ===== Office scene (image-based, with ambient life) ===== */
+.office__bar { margin-bottom: 14px; }
+.scene {
+  position: relative;
+  width: 100%;
+  max-width: 980px;
+  border-radius: var(--radius);
+  overflow: hidden;
+  border: 1px solid var(--hairline);
+  background: #0d0d0c;
+  line-height: 0;
+}
+.scene__img { width: 100%; display: block; }
+
+/* twinkling city / window lights */
+.scene__lights { position: absolute; inset: 0; pointer-events: none; }
+.scene__lights i {
+  position: absolute; width: 3px; height: 3px; border-radius: 1px;
+  opacity: 0; animation: twinkle 3.4s ease-in-out infinite;
+}
+@keyframes twinkle { 0%, 100% { opacity: 0; } 50% { opacity: 0.85; } }
+
+/* coffee steam (only while working) */
+.scene__steam { position: absolute; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease); }
+.scene.is-working .scene__steam { opacity: 1; }
+.scene__steam i {
+  position: absolute; bottom: 0; left: 0; width: 5px; height: 5px; border-radius: 50%;
+  background: rgba(255, 255, 255, 0.55); animation: steam 3.2s ease-in infinite;
+}
+.scene__steam i:nth-child(2) { left: 9px; animation-delay: 1.1s; }
+.scene__steam i:nth-child(3) { left: -7px; animation-delay: 2.1s; }
+@keyframes steam {
+  0% { transform: translateY(0) scale(.7); opacity: 0; }
+  25% { opacity: .55; }
+  100% { transform: translateY(-38px) scale(1.5); opacity: 0; }
+}
+
+/* status bubble over the maskot */
+.scene__bubble {
+  position: absolute; left: 52%; top: 34%; transform: translate(-50%, -50%);
+  min-width: 46px; height: 46px; padding: 0 8px; border-radius: 24px;
+  display: grid; place-items: center;
+  background: var(--surface); border: 2px solid var(--accent-line);
+  font-size: 24px; font-weight: 600; color: var(--accent);
+  animation: pop .3s var(--ease);
+}
+.scene__bubble.is-done { color: var(--ok); border-color: var(--ok); }
+.scene__bubble.is-error { color: var(--danger); border-color: var(--danger); }
+@keyframes pop { from { transform: translate(-50%, -50%) scale(.5); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
+
+/* done overlay: blur everything, say what got done */
+.done-ov {
+  position: fixed; inset: 0; z-index: 120;
+  display: grid; place-items: center;
+  background: color-mix(in srgb, #000 55%, transparent);
+  backdrop-filter: blur(16px) saturate(120%);
+  -webkit-backdrop-filter: blur(16px) saturate(120%);
+  animation: fade .25s var(--ease);
+  cursor: pointer;
+}
+.done-ov__card { text-align: center; max-width: 620px; padding: 40px; }
+.done-ov__phrase { font-family: var(--serif); font-size: clamp(40px, 8vw, 84px); color: var(--ok); letter-spacing: -0.02em; }
+.done-ov__did { margin-top: 20px; color: #e9e7dd; }
+.done__acts { font-size: 14px; color: var(--accent); font-variant-numeric: tabular-nums; }
+.done__text { margin-top: 12px; font-size: 15px; color: #c4c2b8; line-height: 1.5; }
+.done-ov__hint { margin-top: 28px; font-size: 12px; color: #7f7d74; }
+
+/* ===== immersive office: the whole app goes black, scene fills the screen ===== */
+.vibe-seg { display: none; }
+.office__info { display: none; }
+body.office-mode { background: #000; overflow: hidden; }
+body.office-mode .tabs { display: none; }
+body.office-mode .vibe-seg { display: inline-flex; }
+body.office-mode .office__info {
+  display: block; position: absolute; top: 16px; left: 22px; z-index: 5;
+  font-size: 13px; color: #b7b5ab; font-variant-numeric: tabular-nums;
+}
+body.office-mode .topbar {
+  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
+  border-bottom-color: transparent;
+}
+body.office-mode .brand__name, body.office-mode .brand__sub, body.office-mode .tab { color: #e9e7dd; }
+body.office-mode .tab:hover { color: #fff; }
+body.office-mode .tab.is-active { background: rgba(255, 255, 255, 0.12); color: #fff; }
+body.office-mode .foot { display: none; }
+body.office-mode .main { max-width: none; padding: 0; }
+body.office-mode .office {
+  position: relative;
+  padding: 0;
+  min-height: calc(100vh - 64px);
+  justify-content: center;
+}
+body.office-mode .scene { width: auto; max-width: 100%; margin: 0 auto; border: 0; border-radius: 0; background: #000; }
+body.office-mode .scene__img { width: auto; max-width: 100%; max-height: calc(100vh - 172px); }
+body.office-mode .office__status { position: fixed; bottom: 22px; left: 0; right: 0; z-index: 6; }
+body.office-mode .approvals { position: fixed; left: 50%; transform: translateX(-50%); bottom: 92px; z-index: 8; width: min(680px, 92vw); margin: 0; padding: 0; }
+body.office-mode .office__state { color: #f2efe6; }
+body.office-mode .office__sub { color: #b7b5ab; }
+
+/* ===== smoothness pass: ease colour, border and lift changes everywhere ===== */
+.card, .stat, .turn, .trow--link, .tab, .icon-btn, .plan-select, .seg button {
+  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .2s var(--ease), transform .2s var(--ease);
+}
+.stat[data-focus]:hover, .limitrow[data-focus]:hover { transform: translateY(-2px); }
+
+/* ===== Responsive ===== */
+@media (max-width: 900px) {
+  .cards { grid-template-columns: repeat(2, 1fr); }
+  .ov-grid { grid-template-columns: 1fr; }
+  .tabs { order: 3; width: 100%; margin: 8px 0 0; overflow-x: auto; }
+  .topbar { flex-wrap: wrap; }
+  .trow { grid-template-columns: 14px 1fr 70px 70px; }
+  .trow__model, .trow__cost { display: none; }
+  .comp { grid-template-columns: repeat(2, 1fr); }
+  .fitem { grid-template-columns: 56px 80px 1fr; }
+  .fitem__proj { display: none; }
+}

package/src/approvals.js

@@ -0,0 +1,77 @@
+'use strict';
+
+// Shared state between the PreToolUse hook and the dashboard, all on local disk.
+//   alive            - server heartbeat; the hook refuses to block if it is stale
+//   pending/<id>     - a tool waiting for your decision
+//   decisions/<id>   - your answer, written by the dashboard
+//   rules.json       - standing auto allow rules (allow all / per tool)
+//   token            - shared secret for approving from another device on the LAN
+
+const fs = require('fs');
+const path = require('path');
+const os = require('os');
+
+const DIR = path.join(os.homedir(), '.claude-pulse');
+const PENDING = path.join(DIR, 'pending');
+const DECISIONS = path.join(DIR, 'decisions');
+const RULES = path.join(DIR, 'rules.json');
+const ALIVE = path.join(DIR, 'alive');
+const TOKEN = path.join(DIR, 'token');
+
+function ensure() {
+  for (const d of [DIR, PENDING, DECISIONS]) { try { fs.mkdirSync(d, { recursive: true }); } catch (e) {} }
+}
+
+function heartbeat() { ensure(); try { fs.writeFileSync(ALIVE, String(Date.now())); } catch (e) {} }
+function isAlive(maxAgeMs) {
+  try { return Date.now() - (parseInt(fs.readFileSync(ALIVE, 'utf8'), 10) || 0) < (maxAgeMs || 10000); }
+  catch (e) { return false; }
+}
+
+function readPending() {
+  ensure();
+  let files = [];
+  try { files = fs.readdirSync(PENDING); } catch (e) {}
+  const out = [];
+  for (const f of files) {
+    if (!f.endsWith('.json')) continue;
+    try { out.push(JSON.parse(fs.readFileSync(path.join(PENDING, f), 'utf8'))); } catch (e) {}
+  }
+  // drop stale requests (hook gone) older than 5 min
+  const now = Date.now();
+  const fresh = out.filter(r => r.time && now - r.time < 5 * 60 * 1000);
+  out.sort((a, b) => (a.time || 0) - (b.time || 0));
+  return fresh.sort((a, b) => (a.time || 0) - (b.time || 0));
+}
+function writePending(req) { ensure(); try { fs.writeFileSync(path.join(PENDING, req.id + '.json'), JSON.stringify(req)); } catch (e) {} }
+function removePending(id) { try { fs.unlinkSync(path.join(PENDING, id + '.json')); } catch (e) {} }
+
+function writeDecision(id, decision) { ensure(); try { fs.writeFileSync(path.join(DECISIONS, id + '.json'), JSON.stringify(decision)); } catch (e) {} }
+function readDecision(id) { try { return JSON.parse(fs.readFileSync(path.join(DECISIONS, id + '.json'), 'utf8')); } catch (e) { return null; } }
+function removeDecision(id) { try { fs.unlinkSync(path.join(DECISIONS, id + '.json')); } catch (e) {} }
+
+function readRules() {
+  try {
+    const r = JSON.parse(fs.readFileSync(RULES, 'utf8'));
+    if (typeof r.enabled !== 'boolean') r.enabled = false; // remote approvals are opt-in
+    if (typeof r.paused !== 'boolean') r.paused = false;   // pause is independent of approvals
+    return r;
+  } catch (e) { return { enabled: false, allowAll: false, allowTools: [], denyTools: [], paused: false }; }
+}
+function writeRules(r) { ensure(); try { fs.writeFileSync(RULES, JSON.stringify(r, null, 2)); } catch (e) {} }
+
+function token() {
+  ensure();
+  try { const t = fs.readFileSync(TOKEN, 'utf8').trim(); if (t) return t; } catch (e) {}
+  const t = (Date.now().toString(36) + Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2));
+  try { fs.writeFileSync(TOKEN, t); } catch (e) {}
+  return t;
+}
+
+module.exports = {
+  DIR, PENDING, DECISIONS,
+  ensure, heartbeat, isAlive,
+  readPending, writePending, removePending,
+  writeDecision, readDecision, removeDecision,
+  readRules, writeRules, token,
+};