@kage-core/kage-graph-mcp 1.4.0 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cli.js +157 -137
- package/dist/daemon.js +78 -57
- package/dist/index.js +24 -182
- package/dist/kernel.js +1115 -274
- package/dist/structural-worker.js +17 -13
- package/package.json +7 -4
- package/viewer/console.js +164 -19
- package/viewer/index.html +133 -78
package/viewer/index.html
CHANGED
|
@@ -5,51 +5,65 @@
|
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
6
|
<title>Kage — memory dashboard</title>
|
|
7
7
|
<style>
|
|
8
|
-
/* Tokens mirror docs/assets/site.css so the dashboard
|
|
8
|
+
/* V2 "receipts" theme. Tokens mirror docs/assets/site.css so the dashboard
|
|
9
|
+
matches the site: light-first warm paper, editorial serif display type,
|
|
10
|
+
deep verified-green for gains, dark-capable via prefers-color-scheme. */
|
|
9
11
|
:root {
|
|
10
|
-
color-scheme: dark;
|
|
11
|
-
--bg: #
|
|
12
|
-
--line: #
|
|
13
|
-
--ink: #
|
|
14
|
-
--
|
|
15
|
-
--code: #
|
|
16
|
-
--
|
|
12
|
+
color-scheme: light dark;
|
|
13
|
+
--bg: #f6f4ef; --paper: #fffdf9; --paper-2: #efece4;
|
|
14
|
+
--line: #e2ded2; --line-strong: #c9c4b4;
|
|
15
|
+
--ink: #1c1e1a; --muted: #5d635b; --faint: #8b9088;
|
|
16
|
+
--gain: #0c7a4d; --gain-strong: #09935c; --gain-soft: rgba(12, 122, 77, 0.08);
|
|
17
|
+
--code: #155e9c; --memory: #6d49b8; --warn: #9a6b08; --danger: #b03048;
|
|
18
|
+
--warn-soft: rgba(154, 107, 8, 0.10);
|
|
19
|
+
--code-bg: #15181b; --code-text: #d7e2da;
|
|
20
|
+
--tip-bg: #fffdf9; --shadow: 0 14px 40px rgba(28, 30, 26, 0.12);
|
|
17
21
|
--sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
22
|
+
--serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
|
|
18
23
|
--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
|
19
24
|
--r-control: 4px; --r-panel: 6px; --r-card: 8px;
|
|
20
25
|
}
|
|
26
|
+
@media (prefers-color-scheme: dark) {
|
|
27
|
+
:root {
|
|
28
|
+
--bg: #121413; --paper: #1a1d1b; --paper-2: #212522;
|
|
29
|
+
--line: #2c302c; --line-strong: #41463f;
|
|
30
|
+
--ink: #edefe9; --muted: #a4aba1; --faint: #767d74;
|
|
31
|
+
--gain: #43c98a; --gain-strong: #5fdca0; --gain-soft: rgba(67, 201, 138, 0.12);
|
|
32
|
+
--code: #6fb4e8; --memory: #b095e8; --warn: #d9a93f; --danger: #e07a8c;
|
|
33
|
+
--warn-soft: rgba(217, 169, 63, 0.10);
|
|
34
|
+
--code-bg: #0e1110; --code-text: #cfe0d4;
|
|
35
|
+
--tip-bg: #212522; --shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
21
38
|
* { box-sizing: border-box; }
|
|
22
39
|
html, body { margin: 0; }
|
|
23
|
-
body {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}
|
|
27
|
-
a { color: inherit; text-decoration: none; } a:hover { color: var(--green-strong); }
|
|
28
|
-
.eyebrow { color: var(--muted); font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
|
|
40
|
+
body { background: var(--bg); color: var(--ink); font: 400 14px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
|
|
41
|
+
a { color: inherit; text-decoration: none; } a:hover { color: var(--gain); }
|
|
42
|
+
.eyebrow { color: var(--faint); font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; }
|
|
29
43
|
|
|
30
44
|
.app { display: grid; grid-template-columns: 240px minmax(0,1fr); min-height: 100vh; }
|
|
31
45
|
/* sidebar */
|
|
32
46
|
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
|
|
33
|
-
padding: 20px 16px; border-right: 1px solid var(--line); background:
|
|
34
|
-
.brand { display: inline-flex; align-items: center; gap: 10px; padding: 4px 6px 18px; font: 700
|
|
35
|
-
.brand .mark { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line);
|
|
36
|
-
border-radius: var(--r-control); background:
|
|
37
|
-
.repocard { margin: 0 2px 16px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--
|
|
47
|
+
padding: 20px 16px; border-right: 1px solid var(--line); background: var(--paper); }
|
|
48
|
+
.brand { display: inline-flex; align-items: center; gap: 10px; padding: 4px 6px 18px; font: 700 17px/1 var(--serif); letter-spacing: 0.01em; }
|
|
49
|
+
.brand .mark { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line-strong);
|
|
50
|
+
border-radius: var(--r-control); background: var(--ink); color: var(--paper); font: 700 15px/1 var(--serif); }
|
|
51
|
+
.repocard { margin: 0 2px 16px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg); }
|
|
38
52
|
.repocard .eyebrow { display: block; } .repocard strong { display: block; margin-top: 6px; font: 600 13px/1.3 var(--sans); overflow-wrap: anywhere; }
|
|
39
53
|
.nav { display: flex; flex-direction: column; gap: 2px; }
|
|
40
54
|
.nav button { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer;
|
|
41
55
|
background: transparent; border: 1px solid transparent; color: var(--muted); font: 500 14px/1 var(--sans);
|
|
42
56
|
padding: 10px 11px; border-radius: var(--r-control); }
|
|
43
|
-
.nav button:hover { color: var(--ink); background:
|
|
44
|
-
.nav button[aria-current="true"] { color: var(--
|
|
45
|
-
.nav .ic { width: 15px; text-align: center; color: var(--faint); } .nav button[aria-current="true"] .ic { color: var(--
|
|
57
|
+
.nav button:hover { color: var(--ink); background: var(--paper-2); }
|
|
58
|
+
.nav button[aria-current="true"] { color: var(--gain); background: var(--gain-soft); border-color: var(--gain); font-weight: 600; }
|
|
59
|
+
.nav .ic { width: 15px; text-align: center; color: var(--faint); } .nav button[aria-current="true"] .ic { color: var(--gain); }
|
|
46
60
|
.side .grow { flex: 1; }
|
|
47
61
|
.side .links { display: flex; flex-direction: column; gap: 7px; padding-top: 14px; border-top: 1px solid var(--line); }
|
|
48
62
|
.side .links a { color: var(--faint); font: 500 12.5px/1 var(--sans); } .side .links a:hover { color: var(--ink); }
|
|
49
63
|
|
|
50
64
|
.main { min-width: 0; }
|
|
51
65
|
.head { padding: 30px clamp(20px,3.4vw,44px) 6px; }
|
|
52
|
-
.head h1 { margin: 10px 0 0; font:
|
|
66
|
+
.head h1 { margin: 10px 0 0; font: 600 30px/1.12 var(--serif); letter-spacing: -0.005em; }
|
|
53
67
|
.head p { margin: 8px 0 0; color: var(--muted); font: 400 15px/1.5 var(--sans); max-width: 720px; }
|
|
54
68
|
.wrap { padding: 20px clamp(20px,3.4vw,44px) 90px; }
|
|
55
69
|
.section { display: none; } .section.active { display: block; animation: fade .25s ease; }
|
|
@@ -58,78 +72,112 @@
|
|
|
58
72
|
.panel { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); padding: 20px 22px; margin-bottom: 16px; }
|
|
59
73
|
.panel > h2 { margin: 0 0 16px; font: 600 14px/1.3 var(--sans); } .panel .sub { color: var(--faint); font-weight: 400; }
|
|
60
74
|
|
|
75
|
+
/* ---- gains receipt: value numbers as heroes ---- */
|
|
76
|
+
.receipt { border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--paper); margin-bottom: 16px; overflow: hidden; }
|
|
77
|
+
.receipt .r-head { display: flex; justify-content: space-between; gap: 12px; padding: 13px 24px;
|
|
78
|
+
border-bottom: 1px dashed var(--line-strong); color: var(--faint); font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; }
|
|
79
|
+
.receipt .r-hero { padding: 30px 24px 22px; }
|
|
80
|
+
.receipt .r-hero .big { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
|
|
81
|
+
.receipt .r-hero .big b { font: 600 64px/0.95 var(--serif); letter-spacing: -0.02em; color: var(--gain); font-variant-numeric: tabular-nums; }
|
|
82
|
+
.receipt .r-hero .big .unit { color: var(--muted); font: 500 16px/1 var(--sans); }
|
|
83
|
+
.receipt .r-hero .big .dollars { color: var(--ink); font: 600 22px/1 var(--serif); }
|
|
84
|
+
.receipt .r-hero .sub { margin-top: 10px; color: var(--muted); font: 400 13.5px/1.5 var(--sans); max-width: 560px; }
|
|
85
|
+
.receipt .r-windows { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px dashed var(--line-strong); }
|
|
86
|
+
.receipt .r-win { padding: 16px 24px; border-left: 1px dashed var(--line-strong); }
|
|
87
|
+
.receipt .r-win:first-child { border-left: 0; }
|
|
88
|
+
.receipt .r-win .k { color: var(--faint); font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; }
|
|
89
|
+
.receipt .r-win .v { margin-top: 8px; font: 600 24px/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
|
|
90
|
+
.receipt .r-win .d { margin-top: 5px; color: var(--gain); font: 600 12px/1 var(--mono); }
|
|
91
|
+
.receipt .r-lines { border-top: 1px dashed var(--line-strong); padding: 14px 24px 16px; }
|
|
92
|
+
.receipt .r-line { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; font: 400 13.5px/1.5 var(--sans); color: var(--ink); }
|
|
93
|
+
.receipt .r-line .dots { flex: 1; border-bottom: 1px dotted var(--line-strong); transform: translateY(-4px); }
|
|
94
|
+
.receipt .r-line b { font: 600 14px/1 var(--mono); font-variant-numeric: tabular-nums; }
|
|
95
|
+
.receipt .r-line b.warn { color: var(--warn); } .receipt .r-line b.gain { color: var(--gain); }
|
|
96
|
+
.receipt .r-foot { border-top: 1px dashed var(--line-strong); padding: 11px 24px; color: var(--faint); font: 400 11px/1.5 var(--mono); }
|
|
97
|
+
|
|
98
|
+
/* gains timeline */
|
|
99
|
+
.vfeed { display: grid; }
|
|
100
|
+
.vev { display: grid; grid-template-columns: 20px 1fr auto; gap: 0 13px; align-items: baseline; padding: 11px 4px; border-top: 1px solid var(--line); }
|
|
101
|
+
.vev:first-child { border-top: 0; }
|
|
102
|
+
.vev .vi { font: 600 13px/1.5 var(--mono); text-align: center; }
|
|
103
|
+
.vev .vt { font: 400 13.5px/1.45 var(--sans); color: var(--ink); } .vev .vt b { font-weight: 600; }
|
|
104
|
+
.vev .when { color: var(--faint); font: 400 11px/1 var(--mono); white-space: nowrap; }
|
|
105
|
+
.vev.recall_served .vi { color: var(--gain); }
|
|
106
|
+
.vev.stale_withheld .vi { color: var(--warn); }
|
|
107
|
+
.vev.caller_answered .vi { color: var(--code); }
|
|
108
|
+
|
|
61
109
|
/* trust hero */
|
|
62
|
-
.hero { border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px 28px; margin-bottom: 16px;
|
|
63
|
-
background: radial-gradient(120% 160% at 0 0, rgba(65,255,143,0.06), transparent 58%), var(--paper);
|
|
110
|
+
.hero { border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px 28px; margin-bottom: 16px; background: var(--paper);
|
|
64
111
|
display: grid; grid-template-columns: minmax(190px,auto) 1fr; gap: 36px; align-items: center; }
|
|
65
|
-
.hero[data-status="
|
|
66
|
-
.hero[data-status="
|
|
112
|
+
.hero[data-status="ok"] { border-left: 3px solid var(--gain); }
|
|
113
|
+
.hero[data-status="warn"] { border-left: 3px solid var(--warn); }
|
|
114
|
+
.hero[data-status="alert"] { border-left: 3px solid var(--danger); }
|
|
67
115
|
.hero .score { display: flex; align-items: baseline; gap: 5px; margin-top: 12px; }
|
|
68
|
-
.hero .score b { font:
|
|
116
|
+
.hero .score b { font: 600 62px/0.9 var(--serif); letter-spacing: -0.02em; color: var(--gain); font-variant-numeric: tabular-nums; }
|
|
69
117
|
.hero[data-status="warn"] .score b { color: var(--warn); } .hero[data-status="alert"] .score b { color: var(--danger); }
|
|
70
118
|
.hero .score span { font: 500 17px/1 var(--sans); color: var(--faint); }
|
|
71
119
|
.hero .verdict { margin-top: 14px; color: var(--muted); font: 400 13px/1.55 var(--sans); max-width: 230px; }
|
|
72
120
|
.bars { display: grid; gap: 16px; }
|
|
73
121
|
.bar { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; }
|
|
74
|
-
.bar .lbl { font: 400 13.5px/1.3 var(--sans); } .bar .val { font: 600 13px/1 var(--mono); color: var(--
|
|
75
|
-
.bar .track { grid-column: 1/2; height: 5px; border-radius: 99px; background:
|
|
76
|
-
.bar .track i { display: block; height: 100%; border-radius: 99px; background:
|
|
122
|
+
.bar .lbl { font: 400 13.5px/1.3 var(--sans); } .bar .val { font: 600 13px/1 var(--mono); color: var(--gain); }
|
|
123
|
+
.bar .track { grid-column: 1/2; height: 5px; border-radius: 99px; background: var(--paper-2); overflow: hidden; }
|
|
124
|
+
.bar .track i { display: block; height: 100%; border-radius: 99px; background: var(--gain); width: 0; transition: width 1s cubic-bezier(.2,.7,.2,1); }
|
|
77
125
|
|
|
78
126
|
/* stat tiles */
|
|
79
127
|
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
|
|
80
128
|
.tile { border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 18px; background: var(--paper); }
|
|
81
129
|
.tile .k { color: var(--faint); font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
|
|
82
|
-
.tile .v { margin-top: 10px; font:
|
|
130
|
+
.tile .v { margin-top: 10px; font: 600 28px/1 var(--serif); letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
|
|
83
131
|
.tile .s { margin-top: 6px; color: var(--muted); font: 400 12.5px/1.3 var(--sans); }
|
|
84
|
-
.tile .v.green { color: var(--
|
|
132
|
+
.tile .v.green { color: var(--gain); } .tile .v.code { color: var(--code); } .tile .v.warn { color: var(--warn); } .tile .v.memory { color: var(--memory); }
|
|
85
133
|
|
|
86
134
|
/* attention */
|
|
87
|
-
.alert-card { border: 1px solid
|
|
88
|
-
.alert-card .ah { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--line);
|
|
89
|
-
background: linear-gradient(90deg, rgba(255,209,102,0.07), transparent); }
|
|
135
|
+
.alert-card { border: 1px solid var(--line); border-left: 3px solid var(--warn); border-radius: var(--r-card); overflow: hidden; margin-bottom: 16px; background: var(--paper); }
|
|
136
|
+
.alert-card .ah { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--line); background: var(--warn-soft); }
|
|
90
137
|
.alert-card .ah h2 { margin: 0; font: 600 14px/1 var(--sans); } .alert-card .ah .c { color: var(--warn); font: 600 12px/1 var(--mono); }
|
|
91
138
|
.att { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 13px 20px; border-top: 1px solid var(--line); }
|
|
92
139
|
.att:first-child { border-top: 0; }
|
|
93
|
-
.att .t { font: 500 14px/1.3 var(--sans); } .att .why { grid-column: 1/2; color: var(--warn); font: 400 12px/1.4 var(--sans);
|
|
140
|
+
.att .t { font: 500 14px/1.3 var(--sans); } .att .why { grid-column: 1/2; color: var(--warn); font: 400 12px/1.4 var(--sans); }
|
|
94
141
|
.att .tag { align-self: center; color: var(--faint); font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
|
|
95
142
|
|
|
96
143
|
/* graph */
|
|
97
|
-
.graphwrap { position: relative; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
|
|
98
|
-
background: radial-gradient(52% 44% at 50% 46%, rgba(65,255,143,0.10), transparent 72%), radial-gradient(120% 120% at 50% 0%, rgba(13,25,19,0.85), var(--code-bg)); }
|
|
144
|
+
.graphwrap { position: relative; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--paper-2); }
|
|
99
145
|
#graph { display: block; width: 100%; height: 580px; }
|
|
100
146
|
.glegend { position: absolute; left: 16px; bottom: 14px; display: flex; gap: 16px; color: var(--muted); font: 500 12px/1 var(--sans);
|
|
101
|
-
background:
|
|
147
|
+
background: var(--paper); padding: 9px 13px; border-radius: var(--r-control); border: 1px solid var(--line); }
|
|
102
148
|
.glegend i { display: inline-block; width: 9px; height: 9px; border-radius: 99px; margin-right: 7px; vertical-align: middle; }
|
|
103
|
-
.
|
|
104
|
-
|
|
149
|
+
.glegend i.lg-memory { background: var(--memory); } .glegend i.lg-code { background: var(--code); } .glegend i.lg-warn { background: var(--warn); }
|
|
150
|
+
.gtip { position: absolute; pointer-events: none; background: var(--tip-bg); border: 1px solid var(--line-strong); border-radius: var(--r-control);
|
|
151
|
+
padding: 8px 11px; font: 400 12.5px/1.4 var(--sans); max-width: 270px; display: none; z-index: 5; box-shadow: var(--shadow); }
|
|
105
152
|
.gtip b { color: var(--ink); font-weight: 600; } .gtip .p { margin-top: 3px; color: var(--faint); font: 400 11px/1.3 var(--mono); }
|
|
106
|
-
.gdetail { position: absolute; right: 14px; top: 58px; width: 250px; display: none; z-index: 6; background:
|
|
107
|
-
border: 1px solid var(--line-strong); border-radius: var(--r-card); padding: 14px 15px; box-shadow:
|
|
153
|
+
.gdetail { position: absolute; right: 14px; top: 58px; width: 250px; display: none; z-index: 6; background: var(--paper);
|
|
154
|
+
border: 1px solid var(--line-strong); border-radius: var(--r-card); padding: 14px 15px; box-shadow: var(--shadow); }
|
|
108
155
|
.gdetail .gd-k { font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 7px; }
|
|
156
|
+
.gdetail .gd-k.k-file { color: var(--code); } .gdetail .gd-k.k-memory { color: var(--memory); }
|
|
109
157
|
.gdetail b.gd-t { display: block; color: var(--ink); font: 600 13.5px/1.4 var(--sans); padding-right: 16px; }
|
|
110
158
|
.gdetail .gd-row { margin-top: 9px; color: var(--muted); font: 400 12px/1.4 var(--sans); }
|
|
111
|
-
.gdetail .gd-row b { color: var(--ink); } .gdetail .gd-row b.hot, .gdetail .gd-row b.healthy { color: var(--
|
|
159
|
+
.gdetail .gd-row b { color: var(--ink); } .gdetail .gd-row b.hot, .gdetail .gd-row b.healthy { color: var(--gain); }
|
|
112
160
|
.gdetail .gd-row b.stale, .gdetail .gd-row b.disputed, .gdetail .gd-row b.ungrounded { color: var(--warn); }
|
|
113
161
|
.gdetail .gd-files { margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--faint); font: 400 11px/1.6 var(--mono); overflow-wrap: anywhere; }
|
|
114
162
|
.gdetail .gd-x { position: absolute; right: 8px; top: 6px; cursor: pointer; background: transparent; border: 0; color: var(--faint); font-size: 16px; line-height: 1; padding: 2px 5px; }
|
|
115
163
|
.gdetail .gd-x:hover { color: var(--ink); }
|
|
116
164
|
.ghint { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; pointer-events: none; color: var(--faint); font: 400 11.5px/1 var(--sans); }
|
|
117
165
|
.gtoolbar { position: absolute; left: 14px; top: 14px; right: 14px; display: flex; justify-content: space-between; gap: 10px; }
|
|
118
|
-
.gfilters, .gzoom { display: flex; gap: 4px; background:
|
|
166
|
+
.gfilters, .gzoom { display: flex; gap: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-control); padding: 4px; }
|
|
119
167
|
.gtoolbar button { cursor: pointer; background: transparent; border: 1px solid transparent; color: var(--muted); border-radius: 3px; font: 500 12px/1 var(--sans); padding: 6px 10px; }
|
|
120
|
-
.gtoolbar button:hover { color: var(--ink); background:
|
|
121
|
-
.gfilters button[aria-pressed="true"] { color: var(--
|
|
168
|
+
.gtoolbar button:hover { color: var(--ink); background: var(--paper-2); }
|
|
169
|
+
.gfilters button[aria-pressed="true"] { color: var(--gain); background: var(--gain-soft); border-color: var(--gain); }
|
|
122
170
|
.gzoom button { width: 30px; padding: 6px 0; text-align: center; font-size: 14px; color: var(--ink); }
|
|
123
171
|
|
|
124
172
|
/* memory list */
|
|
125
173
|
.controls { margin-bottom: 12px; }
|
|
126
174
|
.controls input { width: 100%; background: var(--paper); border: 1px solid var(--line); color: var(--ink); border-radius: var(--r-control);
|
|
127
175
|
padding: 11px 14px; font: 400 14px/1 var(--sans); }
|
|
128
|
-
.controls input::placeholder { color: var(--faint); } .controls input:focus { outline: none; border-color: var(--
|
|
176
|
+
.controls input::placeholder { color: var(--faint); } .controls input:focus { outline: none; border-color: var(--gain); }
|
|
129
177
|
.chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
|
|
130
178
|
.chip { font: 500 12.5px/1 var(--sans); padding: 8px 13px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
|
|
131
|
-
.chip[aria-pressed="true"] { border-color:
|
|
132
|
-
.chip b { color: var(--faint); font-weight: 600; } .chip[aria-pressed="true"] b { color: var(--
|
|
179
|
+
.chip[aria-pressed="true"] { border-color: var(--gain); background: var(--gain-soft); color: var(--ink); }
|
|
180
|
+
.chip b { color: var(--faint); font-weight: 600; } .chip[aria-pressed="true"] b { color: var(--gain); }
|
|
133
181
|
.memcount { color: var(--faint); font: 500 12px/1 var(--mono); margin: 2px 0 10px; }
|
|
134
182
|
.grouphead { display: flex; align-items: center; gap: 11px; padding: 18px 4px 9px; }
|
|
135
183
|
.grouphead:first-child { padding-top: 4px; }
|
|
@@ -138,29 +186,29 @@
|
|
|
138
186
|
.grouphead .gline { flex: 1; height: 1px; background: var(--line); }
|
|
139
187
|
.row { display: grid; grid-template-columns: 9px 1fr auto; gap: 0 14px; align-items: center; padding: 12px 8px; border-top: 1px solid var(--line); border-radius: var(--r-control); }
|
|
140
188
|
.grouphead + .row { border-top: 0; }
|
|
141
|
-
.row:hover { background:
|
|
189
|
+
.row:hover { background: var(--paper-2); }
|
|
142
190
|
.dot { width: 8px; height: 8px; border-radius: 99px; background: var(--faint); }
|
|
143
|
-
.dot.hot { background: var(--
|
|
144
|
-
.dot.cold { background:
|
|
191
|
+
.dot.hot { background: var(--gain-strong); } .dot.healthy { background: var(--gain); }
|
|
192
|
+
.dot.cold { background: var(--line-strong); } .dot.stale, .dot.disputed, .dot.ungrounded { background: var(--warn); }
|
|
145
193
|
.row .title { font: 500 14px/1.4 var(--sans); }
|
|
146
194
|
.row .meta { margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
|
|
147
|
-
.type { color: var(--memory); font: 500 11px/1 var(--mono); padding: 3px 7px; border: 1px solid
|
|
195
|
+
.type { color: var(--memory); font: 500 11px/1 var(--mono); padding: 3px 7px; border: 1px solid var(--memory); border-radius: var(--r-control); }
|
|
148
196
|
.paths { color: var(--faint); font: 400 11px/1.3 var(--mono); overflow-wrap: anywhere; }
|
|
149
197
|
.row .right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; white-space: nowrap; }
|
|
150
198
|
.pill { font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; padding: 4px 9px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
|
|
151
|
-
.pill.hot, .pill.healthy { color: var(--
|
|
199
|
+
.pill.hot, .pill.healthy { color: var(--gain); border-color: var(--gain); background: var(--gain-soft); }
|
|
152
200
|
.pill.cold { color: var(--faint); }
|
|
153
|
-
.pill.stale, .pill.disputed, .pill.ungrounded { color: var(--warn); border-color:
|
|
201
|
+
.pill.stale, .pill.disputed, .pill.ungrounded { color: var(--warn); border-color: var(--warn); background: var(--warn-soft); }
|
|
154
202
|
.uses { color: var(--faint); font: 400 11px/1 var(--mono); }
|
|
155
203
|
.showmore { width: 100%; margin-top: 14px; padding: 12px; background: transparent; border: 1px solid var(--line); border-radius: var(--r-control); color: var(--muted); font: 500 13px/1 var(--sans); cursor: pointer; }
|
|
156
|
-
.showmore:hover { color: var(--ink); border-color: var(--line-strong); background:
|
|
204
|
+
.showmore:hover { color: var(--ink); border-color: var(--line-strong); background: var(--paper-2); }
|
|
157
205
|
.row { cursor: pointer; }
|
|
158
206
|
|
|
159
207
|
/* activity */
|
|
160
208
|
.daybars { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding-top: 8px; }
|
|
161
209
|
.daybars .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
|
|
162
|
-
.daybars .col .bar { width: 100%; max-width: 30px; border-radius: 3px 3px 0 0; background:
|
|
163
|
-
.daybars .col .bar.empty { background:
|
|
210
|
+
.daybars .col .bar { width: 100%; max-width: 30px; border-radius: 3px 3px 0 0; background: var(--gain); min-height: 3px; transition: height .8s cubic-bezier(.2,.7,.2,1); }
|
|
211
|
+
.daybars .col .bar.empty { background: var(--paper-2); }
|
|
164
212
|
.daybars .col .d { color: var(--faint); font: 400 9.5px/1 var(--mono); white-space: nowrap; }
|
|
165
213
|
.daybars .col .v { color: var(--muted); font: 600 11px/1 var(--mono); }
|
|
166
214
|
.feed { display: grid; }
|
|
@@ -169,21 +217,21 @@
|
|
|
169
217
|
.ev .ei { font-size: 13px; line-height: 1.5; }
|
|
170
218
|
.ev .et { font: 500 13.5px/1.45 var(--sans); } .ev .ek { color: var(--faint); font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
|
|
171
219
|
.ev .when { color: var(--faint); font: 400 11px/1 var(--mono); white-space: nowrap; }
|
|
172
|
-
.ev.recall .ei { color: var(--
|
|
220
|
+
.ev.recall .ei { color: var(--gain); } .ev.capture .ei { color: var(--memory); } .ev.supersede .ei, .ev.deprecate .ei { color: var(--warn); }
|
|
173
221
|
|
|
174
222
|
/* packet detail drawer */
|
|
175
|
-
.drawer-backdrop { position: fixed; inset: 0; background: rgba(
|
|
223
|
+
.drawer-backdrop { position: fixed; inset: 0; background: rgba(28, 30, 26, 0.35); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 40; }
|
|
176
224
|
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
|
|
177
225
|
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(460px, 92vw); transform: translateX(102%); transition: transform .28s cubic-bezier(.2,.7,.2,1);
|
|
178
|
-
background: var(--paper); border-left: 1px solid var(--line-strong); z-index: 50; overflow-y: auto; padding: 24px 26px 60px; box-shadow:
|
|
226
|
+
background: var(--paper); border-left: 1px solid var(--line-strong); z-index: 50; overflow-y: auto; padding: 24px 26px 60px; box-shadow: var(--shadow); }
|
|
179
227
|
.drawer.open { transform: translateX(0); }
|
|
180
228
|
.drawer .dr-x { position: absolute; right: 16px; top: 14px; cursor: pointer; background: transparent; border: 0; color: var(--faint); font-size: 22px; line-height: 1; padding: 2px 6px; }
|
|
181
229
|
.drawer .dr-x:hover { color: var(--ink); }
|
|
182
230
|
.drawer .dr-tags { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin: 4px 30px 0 0; }
|
|
183
|
-
.drawer .dr-title { margin: 14px 0 0; font:
|
|
231
|
+
.drawer .dr-title { margin: 14px 0 0; font: 600 20px/1.35 var(--serif); color: var(--ink); }
|
|
184
232
|
.drawer .dr-summary { margin: 10px 0 0; color: var(--muted); font: 400 14px/1.6 var(--sans); }
|
|
185
233
|
.drawer .dr-body { margin: 18px 0 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--code-bg);
|
|
186
|
-
color: var(--code-text
|
|
234
|
+
color: var(--code-text); font: 400 13px/1.7 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
|
|
187
235
|
.drawer .dr-sec { margin-top: 20px; }
|
|
188
236
|
.drawer .dr-h { color: var(--faint); font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 9px; }
|
|
189
237
|
.drawer .dr-file { color: var(--code); font: 400 12px/1.7 var(--mono); overflow-wrap: anywhere; }
|
|
@@ -198,7 +246,7 @@
|
|
|
198
246
|
.donut { width: 132px; height: 132px; border-radius: 99px; flex: none; position: relative; }
|
|
199
247
|
.donut::after { content: ""; position: absolute; inset: 21px; border-radius: 99px; background: var(--paper); }
|
|
200
248
|
.donut .center { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; text-align: center; }
|
|
201
|
-
.donut .center b { font:
|
|
249
|
+
.donut .center b { font: 600 26px/1 var(--serif); color: var(--gain); } .donut .center b.warn { color: var(--warn); } .donut .center b.danger { color: var(--danger); } .donut .center span { display: block; margin-top: 4px; color: var(--faint); font: 600 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
|
|
202
250
|
.donut-cap { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font: 400 12.5px/1.5 var(--sans); }
|
|
203
251
|
.donut-cap b { color: var(--ink); font-weight: 600; }
|
|
204
252
|
.legend2 { display: grid; gap: 10px; flex: 1; }
|
|
@@ -206,17 +254,17 @@
|
|
|
206
254
|
.legend2 .li i { width: 9px; height: 9px; border-radius: 2px; } .legend2 .li b { margin-left: auto; color: var(--muted); font: 500 12px/1 var(--mono); }
|
|
207
255
|
.hbars { display: grid; gap: 11px; }
|
|
208
256
|
.hbar { display: grid; grid-template-columns: 116px 1fr 34px; gap: 12px; align-items: center; font: 400 13px/1 var(--sans); }
|
|
209
|
-
.hbar .n { color: var(--muted); } .hbar .t { height: 7px; border-radius: 99px; background:
|
|
210
|
-
.hbar .t i { display: block; height: 100%; width: 0; min-width: 8px; border-radius: 99px; background:
|
|
211
|
-
.hbar.code .t i { background:
|
|
257
|
+
.hbar .n { color: var(--muted); } .hbar .t { height: 7px; border-radius: 99px; background: var(--paper-2); overflow: hidden; }
|
|
258
|
+
.hbar .t i { display: block; height: 100%; width: 0; min-width: 8px; border-radius: 99px; background: var(--memory); transition: width .9s cubic-bezier(.2,.7,.2,1); }
|
|
259
|
+
.hbar.code .t i { background: var(--code); }
|
|
212
260
|
.hbar .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
213
261
|
.hbar .c { text-align: right; color: var(--faint); font: 500 12px/1 var(--mono); }
|
|
214
262
|
.facts { display: grid; gap: 13px; }
|
|
215
263
|
.fact { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); font: 400 13.5px/1.5 var(--sans); }
|
|
216
264
|
.fact .em { font-size: 17px; line-height: 1.3; } .fact span { color: var(--muted); } .fact b { color: var(--ink); font-weight: 600; }
|
|
217
|
-
.fact code { padding: 1px 5px; border: 1px solid var(--line); border-radius: var(--r-control); background:
|
|
265
|
+
.fact code { padding: 1px 5px; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--paper-2); color: var(--code); font: 500 12px/1.4 var(--mono); }
|
|
218
266
|
.empty { color: var(--faint); padding: 22px 4px; font: 400 14px/1.5 var(--sans); }
|
|
219
|
-
@media (max-width: 760px) { .app { grid-template-columns: 1fr; } .side { position: static; height: auto; } .tiles { grid-template-columns: repeat(2,1fr); } .ins-grid { grid-template-columns: 1fr; } .hero { grid-template-columns: 1fr; gap: 22px; } }
|
|
267
|
+
@media (max-width: 760px) { .app { grid-template-columns: 1fr; } .side { position: static; height: auto; } .tiles { grid-template-columns: repeat(2,1fr); } .ins-grid { grid-template-columns: 1fr; } .hero { grid-template-columns: 1fr; gap: 22px; } .receipt .r-windows { grid-template-columns: 1fr; } .receipt .r-win { border-left: 0; border-top: 1px dashed var(--line-strong); } .receipt .r-win:first-child { border-top: 0; } }
|
|
220
268
|
</style>
|
|
221
269
|
</head>
|
|
222
270
|
<body>
|
|
@@ -225,7 +273,8 @@
|
|
|
225
273
|
<div class="brand"><span class="mark">K</span> Kage</div>
|
|
226
274
|
<div class="repocard"><span class="eyebrow">Repository</span><strong id="repo">loading…</strong></div>
|
|
227
275
|
<nav class="nav" id="nav">
|
|
228
|
-
<button data-section="
|
|
276
|
+
<button data-section="gains" aria-current="true"><span class="ic">⊕</span> Gains</button>
|
|
277
|
+
<button data-section="overview"><span class="ic">◎</span> Trust</button>
|
|
229
278
|
<button data-section="graph"><span class="ic">⬡</span> Memory map</button>
|
|
230
279
|
<button data-section="memory"><span class="ic">▤</span> Memory</button>
|
|
231
280
|
<button data-section="activity"><span class="ic">◷</span> Activity</button>
|
|
@@ -241,12 +290,18 @@
|
|
|
241
290
|
|
|
242
291
|
<main class="main">
|
|
243
292
|
<header class="head">
|
|
244
|
-
<span class="eyebrow" id="eyebrow">kage://
|
|
245
|
-
<h1 id="title">
|
|
246
|
-
<p id="subtitle">
|
|
293
|
+
<span class="eyebrow" id="eyebrow">kage://gains</span>
|
|
294
|
+
<h1 id="title">What Kage saved you</h1>
|
|
295
|
+
<p id="subtitle">Tokens, dollars, and bad memories caught — receipts, not vibes.</p>
|
|
247
296
|
</header>
|
|
248
297
|
<div class="wrap">
|
|
249
|
-
<section class="section active" id="section-
|
|
298
|
+
<section class="section active" id="section-gains">
|
|
299
|
+
<div class="receipt" id="gainsHero"></div>
|
|
300
|
+
<div class="tiles" id="gainsTiles"></div>
|
|
301
|
+
<div class="panel"><h2>Value timeline <span class="sub">— every saved recall and withheld stale memory, as it happened</span></h2><div id="gainsTimeline"></div></div>
|
|
302
|
+
</section>
|
|
303
|
+
|
|
304
|
+
<section class="section" id="section-overview">
|
|
250
305
|
<div id="hero" class="hero" data-status="idle"></div>
|
|
251
306
|
<div class="tiles" id="tiles"></div>
|
|
252
307
|
<div id="attentionMount"></div>
|
|
@@ -270,7 +325,7 @@
|
|
|
270
325
|
</div>
|
|
271
326
|
</div>
|
|
272
327
|
<div class="ghint">scroll to zoom · drag a node to pin · click to focus · double-click to zoom in</div>
|
|
273
|
-
<div class="glegend"><span><i
|
|
328
|
+
<div class="glegend"><span><i class="lg-memory"></i>memory</span><span><i class="lg-code"></i>code file</span><span><i class="lg-warn"></i>needs review</span></div>
|
|
274
329
|
<div class="gtip" id="gtip"></div>
|
|
275
330
|
<div class="gdetail" id="gdetail"></div>
|
|
276
331
|
</div>
|
|
@@ -306,6 +361,6 @@
|
|
|
306
361
|
</div>
|
|
307
362
|
<div class="drawer-backdrop" id="detailBackdrop"></div>
|
|
308
363
|
<aside class="drawer" id="detail" aria-hidden="true"></aside>
|
|
309
|
-
<script src="./console.js?v=
|
|
364
|
+
<script src="./console.js?v=16"></script>
|
|
310
365
|
</body>
|
|
311
366
|
</html>
|