@mcpware/claude-code-organizer 0.1.0
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/.claude-plugin/plugin.json +21 -0
- package/LICENSE +21 -0
- package/PLAN.md +243 -0
- package/README.md +123 -0
- package/SHIP.md +96 -0
- package/bin/cli.mjs +23 -0
- package/mockup.html +419 -0
- package/package.json +39 -0
- package/src/mover.mjs +218 -0
- package/src/scanner.mjs +513 -0
- package/src/server.mjs +147 -0
- package/src/ui/app.js +580 -0
- package/src/ui/index.html +88 -0
- package/src/ui/style.css +203 -0
package/src/ui/style.css
ADDED
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
/* ══════════════════════════════════════════════════════════
|
|
2
|
+
Claude Inventory Manager — Styles
|
|
3
|
+
Edit this file freely. No logic here.
|
|
4
|
+
══════════════════════════════════════════════════════════ */
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
--bg: #fafbfc;
|
|
8
|
+
--surface: #ffffff;
|
|
9
|
+
--border: #e2e4ea;
|
|
10
|
+
--border-light: #eef0f4;
|
|
11
|
+
--text-primary: #1e2028;
|
|
12
|
+
--text-secondary: #5a5d6e;
|
|
13
|
+
--text-muted: #9598a8;
|
|
14
|
+
--text-faint: #c2c5d0;
|
|
15
|
+
--accent: #5b5fc7;
|
|
16
|
+
--accent-light: #ededfa;
|
|
17
|
+
--accent-text: #4345a0;
|
|
18
|
+
--scope-bg: #f0f1f8;
|
|
19
|
+
--scope-border: #d8dae8;
|
|
20
|
+
--cat-bg: #f6f7fb;
|
|
21
|
+
--cat-border: #e8e9f0;
|
|
22
|
+
--hover: #f5f6fa;
|
|
23
|
+
--tag-global-bg: #e8e9fa; --tag-global-text: #5b5fc7;
|
|
24
|
+
--tag-workspace-bg: #fef0e4; --tag-workspace-text: #c67a2e;
|
|
25
|
+
--tag-project-bg: #e4f6ec; --tag-project-text: #2d8a56;
|
|
26
|
+
--badge-feedback: #e6960a;
|
|
27
|
+
--badge-user: #7c3aed;
|
|
28
|
+
--badge-project: #2563eb;
|
|
29
|
+
--badge-reference: #059669;
|
|
30
|
+
--badge-skill: #ea580c;
|
|
31
|
+
--badge-mcp: #d946a8;
|
|
32
|
+
--badge-config: #9ca3af;
|
|
33
|
+
--badge-hook: #6366f1;
|
|
34
|
+
--badge-plugin: #8b5cf6;
|
|
35
|
+
--badge-plan: #64748b;
|
|
36
|
+
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
|
|
37
|
+
--radius: 10px;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
* { margin:0; padding:0; box-sizing:border-box; }
|
|
41
|
+
body {
|
|
42
|
+
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
|
|
43
|
+
background:var(--bg); color:var(--text-primary);
|
|
44
|
+
height:100vh; overflow:hidden; -webkit-font-smoothing:antialiased; font-size:14px;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.app { display:flex; height:100vh; }
|
|
48
|
+
.tree-area { flex:1; overflow-y:auto; padding:28px 36px 80px; max-width:960px; margin:0 auto; }
|
|
49
|
+
|
|
50
|
+
/* ── Page header ── */
|
|
51
|
+
.page-hdr { display:flex; align-items:center; gap:14px; margin-bottom:28px; flex-wrap:wrap; }
|
|
52
|
+
.logo { width:32px; height:32px; background:var(--accent); border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; font-weight:700; flex-shrink:0; }
|
|
53
|
+
.page-hdr h1 { font-size:1.25rem; color:var(--text-primary); font-weight:700; letter-spacing:-0.4px; }
|
|
54
|
+
.spacer { flex:1; }
|
|
55
|
+
.search { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:7px 14px; color:var(--text-primary); font-size:0.78rem; width:200px; font-family:inherit; outline:none; transition:all 0.15s; }
|
|
56
|
+
.search:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
|
|
57
|
+
.search::placeholder { color:var(--text-faint); }
|
|
58
|
+
.pills { display:flex; gap:4px; flex-wrap:wrap; }
|
|
59
|
+
.pill { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:4px 12px; color:var(--text-secondary); font-size:0.7rem; cursor:pointer; font-weight:500; transition:all 0.15s; white-space:nowrap; }
|
|
60
|
+
.pill:hover { background:var(--hover); border-color:var(--scope-border); }
|
|
61
|
+
.pill.active { background:var(--accent); border-color:var(--accent); color:#fff; }
|
|
62
|
+
.pill b { font-weight:700; margin-left:2px; opacity:0.7; }
|
|
63
|
+
.pill.active b { opacity:1; }
|
|
64
|
+
|
|
65
|
+
/* ══════════════════════════════════════
|
|
66
|
+
SCOPE HEADER — Most prominent
|
|
67
|
+
══════════════════════════════════════ */
|
|
68
|
+
.scope-block { margin-bottom:4px; }
|
|
69
|
+
.child-scopes { margin-left:20px; }
|
|
70
|
+
|
|
71
|
+
.scope-hdr {
|
|
72
|
+
display:flex; align-items:center; gap:10px;
|
|
73
|
+
padding:11px 16px; cursor:pointer; border-radius:var(--radius);
|
|
74
|
+
background:var(--scope-bg); border:1px solid var(--scope-border);
|
|
75
|
+
user-select:none; transition:all 0.15s; margin-bottom:3px;
|
|
76
|
+
}
|
|
77
|
+
.scope-hdr:hover { background:#e8e9f4; border-color:#cfd1e2; }
|
|
78
|
+
.scope-tog { width:16px; text-align:center; color:var(--accent); font-size:0.7rem; transition:transform 0.15s; flex-shrink:0; }
|
|
79
|
+
.scope-tog.c { transform:rotate(-90deg); }
|
|
80
|
+
.scope-ico { font-size:1rem; flex-shrink:0; }
|
|
81
|
+
.scope-nm { font-size:0.92rem; font-weight:700; color:var(--text-primary); letter-spacing:-0.2px; }
|
|
82
|
+
.scope-tag { font-size:0.58rem; padding:2px 8px; border-radius:5px; font-weight:600; }
|
|
83
|
+
.tag-global { background:var(--tag-global-bg); color:var(--tag-global-text); }
|
|
84
|
+
.tag-workspace { background:var(--tag-workspace-bg); color:var(--tag-workspace-text); }
|
|
85
|
+
.tag-project { background:var(--tag-project-bg); color:var(--tag-project-text); }
|
|
86
|
+
.scope-info { font-size:0.65rem; color:var(--text-muted); margin-left:auto; }
|
|
87
|
+
.scope-cnt { background:var(--accent-light); color:var(--accent-text); border-radius:10px; padding:2px 9px; font-size:0.62rem; font-weight:700; }
|
|
88
|
+
|
|
89
|
+
.scope-body { padding:0 0 6px; }
|
|
90
|
+
.scope-body.c { display:none; }
|
|
91
|
+
|
|
92
|
+
.inherit {
|
|
93
|
+
font-size:0.68rem; color:var(--accent-text); padding:6px 14px 10px 40px;
|
|
94
|
+
font-weight:500; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
|
|
95
|
+
}
|
|
96
|
+
.inherit-pill { background:var(--accent-light); color:var(--accent-text); padding:2px 8px; border-radius:4px; font-size:0.6rem; font-weight:600; }
|
|
97
|
+
.inherit-arrow { color:var(--accent); font-size:0.8rem; }
|
|
98
|
+
|
|
99
|
+
/* ══════════════════════════════════════
|
|
100
|
+
CATEGORY BAR — Medium prominence
|
|
101
|
+
══════════════════════════════════════ */
|
|
102
|
+
.cat-hdr {
|
|
103
|
+
display:flex; align-items:center; gap:8px;
|
|
104
|
+
padding:8px 14px; margin:4px 0 2px 24px; cursor:pointer;
|
|
105
|
+
background:var(--cat-bg); border:1px solid var(--cat-border);
|
|
106
|
+
border-radius:8px; user-select:none; transition:all 0.15s;
|
|
107
|
+
}
|
|
108
|
+
.cat-hdr:hover { background:#eeeef6; border-color:#dddee8; }
|
|
109
|
+
.cat-tog { width:14px; text-align:center; color:var(--text-muted); font-size:0.6rem; transition:transform 0.15s; flex-shrink:0; }
|
|
110
|
+
.cat-tog.c { transform:rotate(-90deg); }
|
|
111
|
+
.cat-ico { font-size:0.85rem; }
|
|
112
|
+
.cat-nm { font-size:0.72rem; color:var(--text-secondary); font-weight:700; text-transform:uppercase; letter-spacing:1px; }
|
|
113
|
+
.cat-cnt { font-size:0.62rem; color:var(--text-muted); margin-left:auto; font-weight:500; }
|
|
114
|
+
|
|
115
|
+
.cat-body { padding:0; }
|
|
116
|
+
.cat-body.c { display:none; }
|
|
117
|
+
|
|
118
|
+
/* ══════════════════════════════════════
|
|
119
|
+
ITEM ROW — Least prominent
|
|
120
|
+
══════════════════════════════════════ */
|
|
121
|
+
.sortable-zone { min-height:4px; margin-left:64px; padding:2px 0; }
|
|
122
|
+
|
|
123
|
+
.item-row {
|
|
124
|
+
display:flex; align-items:center; gap:8px;
|
|
125
|
+
padding:6px 10px; margin:1px 0; border-radius:6px;
|
|
126
|
+
cursor:grab; transition:all 0.1s;
|
|
127
|
+
border:1px solid transparent;
|
|
128
|
+
}
|
|
129
|
+
.item-row:hover { background:var(--hover); border-color:var(--border-light); }
|
|
130
|
+
.item-row:active { cursor:grabbing; }
|
|
131
|
+
.item-row.sortable-ghost { opacity:0.2; border:1px dashed var(--accent); background:var(--accent-light); }
|
|
132
|
+
.item-row.sortable-chosen { background:var(--accent-light); border-color:var(--accent); }
|
|
133
|
+
.item-row.locked { opacity:0.35; cursor:default; }
|
|
134
|
+
.item-row.selected { background:var(--accent-light); border-color:var(--accent); }
|
|
135
|
+
|
|
136
|
+
.row-ico { font-size:0.72rem; flex-shrink:0; }
|
|
137
|
+
.row-name { font-size:0.75rem; color:var(--text-secondary); font-weight:500; flex-shrink:0; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
138
|
+
.row-badge { font-size:0.5rem; padding:1px 5px; border-radius:3px; color:#fff; font-weight:600; flex-shrink:0; }
|
|
139
|
+
.b-feedback { background:var(--badge-feedback); }
|
|
140
|
+
.b-user { background:var(--badge-user); }
|
|
141
|
+
.b-project { background:var(--badge-project); }
|
|
142
|
+
.b-reference { background:var(--badge-reference); }
|
|
143
|
+
.b-skill { background:var(--badge-skill); }
|
|
144
|
+
.b-mcp { background:var(--badge-mcp); }
|
|
145
|
+
.b-config { background:var(--badge-config); }
|
|
146
|
+
.b-hook { background:var(--badge-hook); }
|
|
147
|
+
.b-plugin { background:var(--badge-plugin); }
|
|
148
|
+
.b-plan { background:var(--badge-plan); }
|
|
149
|
+
.b-memory { background:var(--badge-feedback); }
|
|
150
|
+
.row-desc { font-size:0.65rem; color:var(--text-muted); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
151
|
+
.row-meta { font-size:0.58rem; color:var(--text-faint); flex-shrink:0; }
|
|
152
|
+
.row-acts { display:flex; gap:3px; opacity:0; transition:opacity 0.1s; flex-shrink:0; }
|
|
153
|
+
.item-row:hover .row-acts { opacity:1; }
|
|
154
|
+
.rbtn { background:var(--surface); border:1px solid var(--border); border-radius:5px; color:var(--text-secondary); padding:3px 8px; cursor:pointer; font-size:0.6rem; font-family:inherit; transition:all 0.12s; }
|
|
155
|
+
.rbtn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
|
|
156
|
+
|
|
157
|
+
/* ── Detail panel ── */
|
|
158
|
+
.detail { width:340px; border-left:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; background:var(--surface); }
|
|
159
|
+
.detail.hidden { display:none; }
|
|
160
|
+
.detail-hdr { padding:18px 20px; border-bottom:1px solid var(--border-light); display:flex; align-items:center; }
|
|
161
|
+
.detail-hdr h2 { font-size:0.88rem; color:var(--text-primary); flex:1; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
162
|
+
.detail-x { background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:1.1rem; transition:color 0.1s; }
|
|
163
|
+
.detail-x:hover { color:var(--text-primary); }
|
|
164
|
+
.detail-bd { flex:1; overflow-y:auto; padding:18px 20px; }
|
|
165
|
+
.df { margin-bottom:16px; }
|
|
166
|
+
.dl { font-size:0.6rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:4px; font-weight:600; }
|
|
167
|
+
.dv { font-size:0.78rem; color:var(--text-secondary); line-height:1.4; }
|
|
168
|
+
.detail-ft { padding:16px 20px; border-top:1px solid var(--border-light); display:flex; gap:8px; }
|
|
169
|
+
.btn { padding:7px 16px; border-radius:8px; font-size:0.73rem; cursor:pointer; font-family:inherit; border:1px solid var(--border); font-weight:500; transition:all 0.15s; }
|
|
170
|
+
.btn-p { background:var(--accent); color:#fff; border-color:var(--accent); }
|
|
171
|
+
.btn-p:hover { background:#4e52b8; }
|
|
172
|
+
.btn-p:disabled { opacity:0.4; cursor:not-allowed; }
|
|
173
|
+
.btn-s { background:var(--surface); color:var(--text-secondary); }
|
|
174
|
+
.btn-s:hover { background:var(--hover); }
|
|
175
|
+
|
|
176
|
+
/* ── Modals ── */
|
|
177
|
+
.modal-bg { position:fixed; inset:0; background:rgba(30,32,40,0.25); display:flex; align-items:center; justify-content:center; z-index:100; backdrop-filter:blur(3px); }
|
|
178
|
+
.modal-bg.hidden { display:none; }
|
|
179
|
+
.modal { background:var(--surface); border:1px solid var(--border); border-radius:16px; width:420px; padding:24px; box-shadow:0 8px 30px rgba(0,0,0,0.1); }
|
|
180
|
+
.modal h3 { font-size:1rem; color:var(--text-primary); font-weight:700; margin-bottom:6px; }
|
|
181
|
+
.modal-sub { font-size:0.7rem; color:var(--text-muted); margin-bottom:16px; }
|
|
182
|
+
.move-preview { background:var(--bg); border:1px solid var(--border-light); border-radius:10px; padding:16px; margin-bottom:18px; font-size:0.78rem; line-height:1.6; }
|
|
183
|
+
.modal-btns { display:flex; gap:8px; justify-content:flex-end; }
|
|
184
|
+
.modal-body { max-height:40vh; overflow-y:auto; margin-bottom:16px; }
|
|
185
|
+
|
|
186
|
+
.dest { padding:10px 14px; cursor:pointer; border-radius:8px; display:flex; align-items:center; gap:10px; font-size:0.78rem; margin:2px 0; border:1px solid transparent; transition:all 0.12s; }
|
|
187
|
+
.dest:hover { background:var(--hover); }
|
|
188
|
+
.dest.sel { background:var(--accent-light); border-color:var(--accent); }
|
|
189
|
+
.dest.cur { opacity:0.35; pointer-events:none; }
|
|
190
|
+
.dest .di { font-size:0.85rem; }
|
|
191
|
+
.dest .dn { color:var(--text-primary); font-weight:600; }
|
|
192
|
+
.dest .dp { color:var(--text-muted); font-size:0.6rem; margin-left:auto; }
|
|
193
|
+
.dest-indent { margin-left:24px; }
|
|
194
|
+
|
|
195
|
+
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--text-primary); color:#fff; padding:12px 28px; border-radius:12px; font-size:0.78rem; z-index:200; box-shadow:0 4px 20px rgba(0,0,0,0.12); font-weight:500; transition:opacity 0.3s; }
|
|
196
|
+
.toast.hidden { display:none; }
|
|
197
|
+
.toast.error { background:#dc2626; }
|
|
198
|
+
|
|
199
|
+
/* ── Scrollbar ── */
|
|
200
|
+
::-webkit-scrollbar { width:6px; }
|
|
201
|
+
::-webkit-scrollbar-track { background:transparent; }
|
|
202
|
+
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
|
|
203
|
+
::-webkit-scrollbar-thumb:hover { background:var(--text-faint); }
|