opencode-mask-j0k3r-dev-rgl 2.0.13 → 2.0.15
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/components.tsx +138 -10
- package/package.json +1 -1
- package/themes/j0k3r-dev-rgl.json +19 -12
- package/tui.tsx +21 -3
package/components.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// @ts-nocheck
|
|
2
2
|
/** @jsxImportSource @opentui/solid */
|
|
3
|
-
import type { TuiThemeCurrent } from "@opencode-ai/plugin/tui"
|
|
3
|
+
import type { TuiThemeCurrent, TuiSidebarFileItem, TuiSidebarMcpItem, TuiSidebarLspItem, TuiSidebarTodoItem } from "@opencode-ai/plugin/tui"
|
|
4
4
|
import type { Cfg } from "./config"
|
|
5
5
|
import { getOSName, getProviders } from "./detection"
|
|
6
6
|
import {
|
|
@@ -17,14 +17,12 @@ export const HomeLogo = (props: { theme: TuiThemeCurrent }) => {
|
|
|
17
17
|
|
|
18
18
|
return (
|
|
19
19
|
<box flexDirection="column" alignItems="center">
|
|
20
|
-
{/* Arch Linux logo — zone-colored */}
|
|
21
20
|
{archLogoHome.map((line, i) => {
|
|
22
21
|
const zone = homeLogoZones[i]
|
|
23
22
|
const color = zoneColors[zone] || t.primary
|
|
24
23
|
return <text fg={color}>{line}</text>
|
|
25
24
|
})}
|
|
26
25
|
|
|
27
|
-
{/* Legend: j0k3r-dev-rgl@latest */}
|
|
28
26
|
<text> </text>
|
|
29
27
|
<box flexDirection="row" gap={0}>
|
|
30
28
|
<text fg="#ff2d78" bold={true}>j0k3r</text>
|
|
@@ -36,7 +34,6 @@ export const HomeLogo = (props: { theme: TuiThemeCurrent }) => {
|
|
|
36
34
|
<text fg="#ffd166" bold={true}>latest</text>
|
|
37
35
|
</box>
|
|
38
36
|
|
|
39
|
-
{/* Subtle separator */}
|
|
40
37
|
<box flexDirection="row" gap={0} marginTop={1}>
|
|
41
38
|
<text fg={t.textMuted} dimColor={true}>╭ </text>
|
|
42
39
|
<text fg={t.textMuted}>arch linux </text>
|
|
@@ -50,21 +47,152 @@ export const HomeLogo = (props: { theme: TuiThemeCurrent }) => {
|
|
|
50
47
|
)
|
|
51
48
|
}
|
|
52
49
|
|
|
53
|
-
// ───
|
|
54
|
-
|
|
50
|
+
// ─── Progress bar helper ──────────────────────────────────────────────────────
|
|
51
|
+
// Renders a ASCII bar like: [████░░░░░░] 40%
|
|
52
|
+
const ProgressBar = (props: {
|
|
53
|
+
value: number // 0–100
|
|
54
|
+
width?: number
|
|
55
|
+
fillColor: string
|
|
56
|
+
emptyColor: string
|
|
57
|
+
theme: TuiThemeCurrent
|
|
58
|
+
}) => {
|
|
59
|
+
const width = props.width ?? 12
|
|
60
|
+
const pct = Math.max(0, Math.min(100, props.value))
|
|
61
|
+
const filled = Math.round((pct / 100) * width)
|
|
62
|
+
const empty = width - filled
|
|
63
|
+
const fill = "█".repeat(filled)
|
|
64
|
+
const trail = "░".repeat(empty)
|
|
65
|
+
|
|
66
|
+
return (
|
|
67
|
+
<box flexDirection="row" gap={0}>
|
|
68
|
+
<text fg={props.theme.textMuted}>[</text>
|
|
69
|
+
<text fg={props.fillColor}>{fill}</text>
|
|
70
|
+
<text fg={props.emptyColor}>{trail}</text>
|
|
71
|
+
<text fg={props.theme.textMuted}>]</text>
|
|
72
|
+
</box>
|
|
73
|
+
)
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
// ─── Sidebar: Arch logo + stats panel ────────────────────────────────────────
|
|
77
|
+
export const SidebarArch = (props: {
|
|
78
|
+
theme: TuiThemeCurrent
|
|
79
|
+
config: Cfg
|
|
80
|
+
sessionID?: string
|
|
81
|
+
branch?: string
|
|
82
|
+
files?: ReadonlyArray<TuiSidebarFileItem>
|
|
83
|
+
mcpItems?: ReadonlyArray<TuiSidebarMcpItem>
|
|
84
|
+
lspItems?: ReadonlyArray<TuiSidebarLspItem>
|
|
85
|
+
todos?: ReadonlyArray<TuiSidebarTodoItem>
|
|
86
|
+
}) => {
|
|
55
87
|
if (!props.config.show_sidebar) return null
|
|
56
88
|
|
|
89
|
+
const t = props.theme
|
|
90
|
+
|
|
91
|
+
// ── Stats ─────────────────────────────────────────────────────────────────
|
|
92
|
+
const files = props.files ?? []
|
|
93
|
+
const todos = props.todos ?? []
|
|
94
|
+
const mcpItems = props.mcpItems ?? []
|
|
95
|
+
const lspItems = props.lspItems ?? []
|
|
96
|
+
|
|
97
|
+
const totalAdditions = files.reduce((s, f) => s + f.additions, 0)
|
|
98
|
+
const totalDeletions = files.reduce((s, f) => s + f.deletions, 0)
|
|
99
|
+
const totalChanges = totalAdditions + totalDeletions
|
|
100
|
+
|
|
101
|
+
const doneTodos = todos.filter(t => t.status === "completed").length
|
|
102
|
+
const totalTodos = todos.length
|
|
103
|
+
const todoPct = totalTodos > 0 ? Math.round((doneTodos / totalTodos) * 100) : 0
|
|
104
|
+
|
|
105
|
+
const mcpConnected = mcpItems.filter(m => m.status === "connected").length
|
|
106
|
+
const mcpTotal = mcpItems.length
|
|
107
|
+
const mcpPct = mcpTotal > 0 ? Math.round((mcpConnected / mcpTotal) * 100) : 0
|
|
108
|
+
|
|
109
|
+
const lspActive = lspItems.filter(l => l.status === "idle" || l.status === "running").length
|
|
110
|
+
const lspTotal = lspItems.length
|
|
111
|
+
|
|
57
112
|
return (
|
|
58
113
|
<box flexDirection="column" alignItems="center">
|
|
59
|
-
|
|
114
|
+
|
|
115
|
+
{/* Mini Arch logo */}
|
|
60
116
|
{archLogoSidebar.map((line, i) => {
|
|
61
117
|
const zone = sidebarLogoZones[i]
|
|
62
|
-
const color = zoneColors[zone] ||
|
|
118
|
+
const color = zoneColors[zone] || t.primary
|
|
63
119
|
return <text fg={color}>{line}</text>
|
|
64
120
|
})}
|
|
65
121
|
|
|
66
|
-
{
|
|
67
|
-
<text
|
|
122
|
+
<text fg={t.textMuted}>j0k3r@latest</text>
|
|
123
|
+
<text> </text>
|
|
124
|
+
|
|
125
|
+
{/* Git branch */}
|
|
126
|
+
{props.branch && (
|
|
127
|
+
<box flexDirection="row" gap={1}>
|
|
128
|
+
<text fg="#ffd166">⎇</text>
|
|
129
|
+
<text fg={t.text}>{props.branch}</text>
|
|
130
|
+
</box>
|
|
131
|
+
)}
|
|
132
|
+
|
|
133
|
+
{/* Files changed bar */}
|
|
134
|
+
{totalChanges > 0 && (
|
|
135
|
+
<box flexDirection="column" marginTop={1}>
|
|
136
|
+
<box flexDirection="row" gap={1}>
|
|
137
|
+
<text fg={t.textMuted}>files</text>
|
|
138
|
+
<text fg={t.textMuted}>{files.length}</text>
|
|
139
|
+
</box>
|
|
140
|
+
<box flexDirection="row" gap={0}>
|
|
141
|
+
<text fg="#00e5a0">+{totalAdditions} </text>
|
|
142
|
+
<text fg="#ff2d78">-{totalDeletions}</text>
|
|
143
|
+
</box>
|
|
144
|
+
<ProgressBar
|
|
145
|
+
value={totalChanges > 0 ? Math.min(100, (totalAdditions / totalChanges) * 100) : 0}
|
|
146
|
+
width={12}
|
|
147
|
+
fillColor="#00e5a0"
|
|
148
|
+
emptyColor="#ff2d78"
|
|
149
|
+
theme={t}
|
|
150
|
+
/>
|
|
151
|
+
</box>
|
|
152
|
+
)}
|
|
153
|
+
|
|
154
|
+
{/* Todos bar */}
|
|
155
|
+
{totalTodos > 0 && (
|
|
156
|
+
<box flexDirection="column" marginTop={1}>
|
|
157
|
+
<box flexDirection="row" gap={1}>
|
|
158
|
+
<text fg={t.textMuted}>todos</text>
|
|
159
|
+
<text fg={t.textMuted}>{doneTodos}/{totalTodos}</text>
|
|
160
|
+
</box>
|
|
161
|
+
<ProgressBar
|
|
162
|
+
value={todoPct}
|
|
163
|
+
width={12}
|
|
164
|
+
fillColor="#9d4edd"
|
|
165
|
+
emptyColor="#3a3a3a"
|
|
166
|
+
theme={t}
|
|
167
|
+
/>
|
|
168
|
+
</box>
|
|
169
|
+
)}
|
|
170
|
+
|
|
171
|
+
{/* MCP bar */}
|
|
172
|
+
{mcpTotal > 0 && (
|
|
173
|
+
<box flexDirection="column" marginTop={1}>
|
|
174
|
+
<box flexDirection="row" gap={1}>
|
|
175
|
+
<text fg={t.textMuted}>mcp</text>
|
|
176
|
+
<text fg={t.textMuted}>{mcpConnected}/{mcpTotal}</text>
|
|
177
|
+
</box>
|
|
178
|
+
<ProgressBar
|
|
179
|
+
value={mcpPct}
|
|
180
|
+
width={12}
|
|
181
|
+
fillColor="#00c8ff"
|
|
182
|
+
emptyColor="#3a3a3a"
|
|
183
|
+
theme={t}
|
|
184
|
+
/>
|
|
185
|
+
</box>
|
|
186
|
+
)}
|
|
187
|
+
|
|
188
|
+
{/* LSP status */}
|
|
189
|
+
{lspTotal > 0 && (
|
|
190
|
+
<box flexDirection="row" gap={1} marginTop={1}>
|
|
191
|
+
<text fg={t.textMuted}>lsp</text>
|
|
192
|
+
<text fg={lspActive > 0 ? "#00e5a0" : "#555555"}>{lspActive}/{lspTotal}</text>
|
|
193
|
+
</box>
|
|
194
|
+
)}
|
|
195
|
+
|
|
68
196
|
<text> </text>
|
|
69
197
|
</box>
|
|
70
198
|
)
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/package.json",
|
|
3
3
|
"name": "opencode-mask-j0k3r-dev-rgl",
|
|
4
|
-
"version": "2.0.
|
|
4
|
+
"version": "2.0.15",
|
|
5
5
|
"description": "Arch Linux TUI mask for OpenCode — hot pink theme with prominent ASCII logo and j0k3r-dev-rgl@latest legend",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"exports": {
|
|
@@ -45,18 +45,25 @@
|
|
|
45
45
|
"borderSubtle": { "dark": "#3a3a3a", "light": "#3a3a3a" },
|
|
46
46
|
"borderHighlight": { "dark": "nBlue", "light": "nBlue" },
|
|
47
47
|
|
|
48
|
-
"diffAdded": { "dark": "
|
|
49
|
-
"diffRemoved": { "dark": "
|
|
50
|
-
"diffContext": { "dark": "
|
|
51
|
-
"diffHunkHeader": { "dark": "
|
|
52
|
-
"diffHighlightAdded": { "dark": "
|
|
53
|
-
"diffHighlightRemoved": { "dark": "
|
|
54
|
-
"diffAddedBg": { "dark": "
|
|
55
|
-
"diffRemovedBg": { "dark": "
|
|
56
|
-
"diffContextBg": { "dark": "
|
|
57
|
-
"diffLineNumber": { "dark": "
|
|
58
|
-
"diffAddedLineNumberBg": { "dark": "
|
|
59
|
-
"diffRemovedLineNumberBg": { "dark": "
|
|
48
|
+
"diffAdded": { "dark": "#00e5a0", "light": "#00e5a0" },
|
|
49
|
+
"diffRemoved": { "dark": "#ff2d78", "light": "#ff2d78" },
|
|
50
|
+
"diffContext": { "dark": "#888888", "light": "#888888" },
|
|
51
|
+
"diffHunkHeader": { "dark": "#9d4edd", "light": "#9d4edd" },
|
|
52
|
+
"diffHighlightAdded": { "dark": "#00ffa0", "light": "#00ffa0" },
|
|
53
|
+
"diffHighlightRemoved": { "dark": "#ff4d8a", "light": "#ff4d8a" },
|
|
54
|
+
"diffAddedBg": { "dark": "#0a2a1a", "light": "#0a2a1a" },
|
|
55
|
+
"diffRemovedBg": { "dark": "#2a0a1a", "light": "#2a0a1a" },
|
|
56
|
+
"diffContextBg": { "dark": "#141414", "light": "#141414" },
|
|
57
|
+
"diffLineNumber": { "dark": "#555555", "light": "#555555" },
|
|
58
|
+
"diffAddedLineNumberBg": { "dark": "#0d1f15", "light": "#0d1f15" },
|
|
59
|
+
"diffRemovedLineNumberBg": { "dark": "#1f0d15", "light": "#1f0d15" },
|
|
60
|
+
|
|
61
|
+
"searchMatch": { "dark": "#1a1a2e", "light": "#1a1a2e" },
|
|
62
|
+
"searchMatchActive": { "dark": "hPink", "light": "hPink" },
|
|
63
|
+
"selectionBg": { "dark": "#2a2a3e", "light": "#2a2a3e" },
|
|
64
|
+
"selectionFg": { "dark": "#e8e8e8", "light": "#e8e8e8" },
|
|
65
|
+
"highlightLineBg": { "dark": "#1f1f2e", "light": "#1f1f2e" },
|
|
66
|
+
"highlightWordBg": { "dark": "#3a1a3e", "light": "#3a1a3e" },
|
|
60
67
|
|
|
61
68
|
"markdownText": { "dark": "#e8e8e8", "light": "#e8e8e8" },
|
|
62
69
|
"markdownHeading": { "dark": "hPink", "light": "hPink" },
|
package/tui.tsx
CHANGED
|
@@ -38,9 +38,27 @@ const tui: TuiPlugin = async (api, options) => {
|
|
|
38
38
|
return <DetectedEnv theme={ctx.theme.current} providers={api.state.provider} config={boot} />
|
|
39
39
|
},
|
|
40
40
|
|
|
41
|
-
// Sidebar:
|
|
42
|
-
sidebar_content(ctx) {
|
|
43
|
-
|
|
41
|
+
// Sidebar: Arch logo + live stats with progress bars
|
|
42
|
+
sidebar_content(ctx, value) {
|
|
43
|
+
const sessionID = value?.session_id
|
|
44
|
+
const branch = api.state.vcs?.branch
|
|
45
|
+
const files = sessionID ? api.state.session.diff(sessionID) : []
|
|
46
|
+
const todos = sessionID ? api.state.session.todo(sessionID) : []
|
|
47
|
+
const mcpItems = api.state.mcp()
|
|
48
|
+
const lspItems = api.state.lsp()
|
|
49
|
+
|
|
50
|
+
return (
|
|
51
|
+
<SidebarArch
|
|
52
|
+
theme={ctx.theme.current}
|
|
53
|
+
config={boot}
|
|
54
|
+
sessionID={sessionID}
|
|
55
|
+
branch={branch}
|
|
56
|
+
files={files}
|
|
57
|
+
todos={todos}
|
|
58
|
+
mcpItems={mcpItems}
|
|
59
|
+
lspItems={lspItems}
|
|
60
|
+
/>
|
|
61
|
+
)
|
|
44
62
|
},
|
|
45
63
|
|
|
46
64
|
// Prompt bar right side: session info
|