claude-plan-review 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/LICENSE +21 -0
- package/README.md +119 -0
- package/package.json +45 -0
- package/src/cli.js +141 -0
- package/src/hook.js +135 -0
- package/src/paths.js +25 -0
- package/src/server.js +187 -0
- package/src/store.js +237 -0
- package/src/ui/app.js +486 -0
- package/src/ui/index.html +94 -0
- package/src/ui/style.css +179 -0
package/src/ui/style.css
ADDED
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--bg: #ffffff;
|
|
3
|
+
--bg-soft: #f6f8fa;
|
|
4
|
+
--border: #d0d7de;
|
|
5
|
+
--border-soft: #eaeef2;
|
|
6
|
+
--fg: #1f2328;
|
|
7
|
+
--fg-muted: #656d76;
|
|
8
|
+
--accent: #0969da;
|
|
9
|
+
--green: #1a7f37;
|
|
10
|
+
--green-bg: #dafbe1;
|
|
11
|
+
--red: #cf222e;
|
|
12
|
+
--red-bg: #ffebe9;
|
|
13
|
+
--add-bg: #e6ffec;
|
|
14
|
+
--add-gutter: #ccffd8;
|
|
15
|
+
--del-bg: #ffebe9;
|
|
16
|
+
--del-gutter: #ffd7d5;
|
|
17
|
+
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
18
|
+
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
|
19
|
+
}
|
|
20
|
+
/* dark palette — applied when the OS prefers dark AND no explicit choice is set… */
|
|
21
|
+
@media (prefers-color-scheme: dark) {
|
|
22
|
+
:root:not([data-theme="light"]):not([data-theme="dark"]) {
|
|
23
|
+
--bg: #0d1117; --bg-soft: #161b22; --border: #30363d; --border-soft: #21262d;
|
|
24
|
+
--fg: #e6edf3; --fg-muted: #8b949e; --accent: #2f81f7; --green: #3fb950;
|
|
25
|
+
--green-bg: #12261e; --red: #f85149; --red-bg: #25171c;
|
|
26
|
+
--add-bg: #12261e; --add-gutter: #1b4721; --del-bg: #25171c; --del-gutter: #542426;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
/* …or whenever the user explicitly picks Dark. */
|
|
30
|
+
:root[data-theme="dark"] {
|
|
31
|
+
--bg: #0d1117; --bg-soft: #161b22; --border: #30363d; --border-soft: #21262d;
|
|
32
|
+
--fg: #e6edf3; --fg-muted: #8b949e; --accent: #2f81f7; --green: #3fb950;
|
|
33
|
+
--green-bg: #12261e; --red: #f85149; --red-bg: #25171c;
|
|
34
|
+
--add-bg: #12261e; --add-gutter: #1b4721; --del-bg: #25171c; --del-gutter: #542426;
|
|
35
|
+
}
|
|
36
|
+
* { box-sizing: border-box; }
|
|
37
|
+
[hidden] { display: none !important; }
|
|
38
|
+
html, body { margin: 0; height: 100%; }
|
|
39
|
+
body { font-family: var(--sans); color: var(--fg); background: var(--bg); font-size: 14px; }
|
|
40
|
+
#app { display: flex; flex-direction: column; min-height: 100vh; }
|
|
41
|
+
|
|
42
|
+
.topbar {
|
|
43
|
+
display: flex; align-items: center; gap: 20px; padding: 10px 18px;
|
|
44
|
+
border-bottom: 1px solid var(--border); background: var(--bg-soft); position: sticky; top: 0; z-index: 10;
|
|
45
|
+
}
|
|
46
|
+
.brand { display: flex; align-items: baseline; gap: 7px; font-weight: 600; }
|
|
47
|
+
.brand .ver { font-weight: 500; font-size: 11px; color: var(--fg-muted); font-family: var(--mono); }
|
|
48
|
+
.iconbtn {
|
|
49
|
+
border: 1px solid var(--border); border-radius: 6px; background: var(--bg); cursor: pointer;
|
|
50
|
+
font-size: 15px; line-height: 1; padding: 6px 9px; flex: none;
|
|
51
|
+
}
|
|
52
|
+
.iconbtn:hover { background: var(--border-soft); }
|
|
53
|
+
.selectors { display: flex; gap: 14px; margin-right: auto; }
|
|
54
|
+
.selectors label, .themePick { display: flex; flex-direction: column; font-size: 11px; color: var(--fg-muted); gap: 2px; }
|
|
55
|
+
.themePick { flex: none; }
|
|
56
|
+
select {
|
|
57
|
+
font-family: var(--sans); font-size: 13px; padding: 4px 8px; border: 1px solid var(--border);
|
|
58
|
+
border-radius: 6px; background: var(--bg); color: var(--fg); max-width: 340px;
|
|
59
|
+
}
|
|
60
|
+
.reviewActions { display: flex; align-items: center; gap: 10px; }
|
|
61
|
+
.pill { font-size: 12px; padding: 3px 10px; border-radius: 999px; font-weight: 600; }
|
|
62
|
+
.pill.pending { background: #fff8c5; color: #7d4e00; }
|
|
63
|
+
.pill.approved { background: var(--green-bg); color: var(--green); }
|
|
64
|
+
.pill.rejected { background: var(--red-bg); color: var(--red); }
|
|
65
|
+
|
|
66
|
+
.btn {
|
|
67
|
+
font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 6px 14px; cursor: pointer;
|
|
68
|
+
border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--fg);
|
|
69
|
+
}
|
|
70
|
+
.btn:hover { background: var(--border-soft); }
|
|
71
|
+
.btn.approve { background: var(--green); border-color: var(--green); color: #fff; }
|
|
72
|
+
.btn.approve:hover { filter: brightness(1.08); }
|
|
73
|
+
.btn.reject { background: var(--red); border-color: var(--red); color: #fff; }
|
|
74
|
+
.btn.reject:hover { filter: brightness(1.08); }
|
|
75
|
+
|
|
76
|
+
.tabs { display: flex; gap: 4px; padding: 0 18px; border-bottom: 1px solid var(--border); background: var(--bg); }
|
|
77
|
+
.tab {
|
|
78
|
+
border: none; background: none; padding: 12px 14px; cursor: pointer; color: var(--fg-muted);
|
|
79
|
+
font-size: 14px; border-bottom: 2px solid transparent; font-family: var(--sans);
|
|
80
|
+
}
|
|
81
|
+
.tab.active { color: var(--fg); font-weight: 600; border-bottom-color: #fd8c73; }
|
|
82
|
+
.count { background: var(--border-soft); border-radius: 999px; padding: 0 7px; font-size: 12px; margin-left: 4px; }
|
|
83
|
+
|
|
84
|
+
main { flex: 1; padding: 22px; max-width: 1100px; width: 100%; margin: 0 auto; }
|
|
85
|
+
.panel { display: none; }
|
|
86
|
+
.panel.active { display: block; }
|
|
87
|
+
|
|
88
|
+
/* preview */
|
|
89
|
+
.markdown-body {
|
|
90
|
+
border: 1px solid var(--border); border-radius: 8px; padding: 28px 36px; line-height: 1.6;
|
|
91
|
+
overflow-x: auto;
|
|
92
|
+
}
|
|
93
|
+
.markdown-body h1 { border-bottom: 1px solid var(--border-soft); padding-bottom: .3em; }
|
|
94
|
+
.markdown-body h2 { border-bottom: 1px solid var(--border-soft); padding-bottom: .3em; }
|
|
95
|
+
.markdown-body code {
|
|
96
|
+
background: var(--bg-soft); padding: .15em .4em; border-radius: 5px; font-family: var(--mono); font-size: 85%;
|
|
97
|
+
}
|
|
98
|
+
.markdown-body pre { background: var(--bg-soft); padding: 14px; border-radius: 8px; overflow-x: auto; }
|
|
99
|
+
.markdown-body pre code { background: none; padding: 0; }
|
|
100
|
+
.markdown-body table { border-collapse: collapse; }
|
|
101
|
+
.markdown-body th, .markdown-body td { border: 1px solid var(--border); padding: 6px 12px; }
|
|
102
|
+
|
|
103
|
+
/* source + comments */
|
|
104
|
+
.source { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; font-family: var(--mono); font-size: 12.5px; }
|
|
105
|
+
.srow { display: flex; align-items: flex-start; }
|
|
106
|
+
.srow:hover { background: var(--bg-soft); }
|
|
107
|
+
.sgutter {
|
|
108
|
+
width: 52px; flex: none; text-align: right; padding: 1px 10px 1px 0; color: var(--fg-muted);
|
|
109
|
+
user-select: none; position: relative; cursor: pointer;
|
|
110
|
+
}
|
|
111
|
+
.sgutter:hover::after { content: "+"; position: absolute; left: 6px; color: #fff; background: var(--accent);
|
|
112
|
+
width: 15px; height: 15px; line-height: 15px; text-align: center; border-radius: 4px; font-size: 12px; }
|
|
113
|
+
.scode { white-space: pre-wrap; word-break: break-word; padding: 1px 10px; flex: 1; }
|
|
114
|
+
.srow.has-comments .sgutter { box-shadow: inset 2px 0 0 #d29922; }
|
|
115
|
+
.source.dragging { user-select: none; }
|
|
116
|
+
.source.dragging .sgutter { cursor: ns-resize; }
|
|
117
|
+
.srow.sel { background: color-mix(in srgb, var(--accent) 14%, transparent); }
|
|
118
|
+
.srow.sel .sgutter { background: color-mix(in srgb, var(--accent) 26%, transparent); color: var(--fg); }
|
|
119
|
+
.threads { padding: 0 10px 0 62px; background: var(--bg-soft); }
|
|
120
|
+
.comment .loc { font-family: var(--mono); color: var(--accent); }
|
|
121
|
+
|
|
122
|
+
.comment {
|
|
123
|
+
border: 1px solid var(--border); border-radius: 8px; margin: 8px 0; background: var(--bg); font-family: var(--sans);
|
|
124
|
+
}
|
|
125
|
+
.comment .chead { display: flex; justify-content: space-between; padding: 6px 12px; border-bottom: 1px solid var(--border-soft);
|
|
126
|
+
background: var(--bg-soft); font-size: 12px; color: var(--fg-muted); border-radius: 8px 8px 0 0; }
|
|
127
|
+
.comment .cbody { padding: 10px 12px; white-space: pre-wrap; }
|
|
128
|
+
.comment .del { cursor: pointer; color: var(--fg-muted); border: none; background: none; font-size: 12px; }
|
|
129
|
+
.comment .del:hover { color: var(--red); }
|
|
130
|
+
|
|
131
|
+
.composer { display: flex; gap: 8px; margin: 8px 0 12px; }
|
|
132
|
+
.composer.inline { padding: 8px 10px 12px 62px; background: var(--bg-soft); }
|
|
133
|
+
textarea {
|
|
134
|
+
flex: 1; font-family: var(--sans); font-size: 13px; padding: 8px 10px; border: 1px solid var(--border);
|
|
135
|
+
border-radius: 6px; background: var(--bg); color: var(--fg); min-height: 38px; resize: vertical;
|
|
136
|
+
}
|
|
137
|
+
.general { margin-top: 26px; }
|
|
138
|
+
.general h3 { font-size: 14px; }
|
|
139
|
+
|
|
140
|
+
/* diff */
|
|
141
|
+
.diffbar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
|
|
142
|
+
.diffbar label { display: flex; flex-direction: column; font-size: 11px; color: var(--fg-muted); gap: 2px; }
|
|
143
|
+
.arrow { color: var(--fg-muted); font-size: 13px; }
|
|
144
|
+
.modetoggle { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
|
|
145
|
+
.seg { border: none; background: var(--bg); padding: 6px 12px; cursor: pointer; font-size: 13px; color: var(--fg-muted); font-family: var(--sans); }
|
|
146
|
+
.seg.active { background: var(--accent); color: #fff; }
|
|
147
|
+
.diffstat { font-size: 12px; color: var(--fg-muted); }
|
|
148
|
+
.diffstat .add { color: var(--green); font-weight: 600; }
|
|
149
|
+
.diffstat .del { color: var(--red); font-weight: 600; }
|
|
150
|
+
|
|
151
|
+
.difftable { width: 100%; border: 1px solid var(--border); border-radius: 8px; border-collapse: collapse;
|
|
152
|
+
font-family: var(--mono); font-size: 12.5px; overflow: hidden; }
|
|
153
|
+
.difftable td { padding: 1px 10px; vertical-align: top; white-space: pre-wrap; word-break: break-word; }
|
|
154
|
+
.difftable td.ln { width: 46px; text-align: right; color: var(--fg-muted); user-select: none; background: var(--bg-soft); }
|
|
155
|
+
.difftable tr.add td.code { background: var(--add-bg); }
|
|
156
|
+
.difftable tr.add td.ln { background: var(--add-gutter); }
|
|
157
|
+
.difftable tr.del td.code { background: var(--del-bg); }
|
|
158
|
+
.difftable tr.del td.ln { background: var(--del-gutter); }
|
|
159
|
+
.difftable td.sign { width: 16px; text-align: center; color: var(--fg-muted); user-select: none; }
|
|
160
|
+
/* split-view per-cell coloring */
|
|
161
|
+
.difftable td.delc.code { background: var(--del-bg); }
|
|
162
|
+
.difftable td.delc.ln { background: var(--del-gutter); }
|
|
163
|
+
.difftable td.addc.code { background: var(--add-bg); }
|
|
164
|
+
.difftable td.addc.ln { background: var(--add-gutter); }
|
|
165
|
+
.difftable td.emptyc { background: var(--bg-soft); }
|
|
166
|
+
.difftable.split td.code { border-left: 1px solid var(--border-soft); }
|
|
167
|
+
.composer .btn.primary { background: var(--green); border-color: var(--green); color: #fff; }
|
|
168
|
+
|
|
169
|
+
.rejectModal { position: fixed; inset: 0; background: #00000066; display: flex; align-items: center; justify-content: center; z-index: 50; }
|
|
170
|
+
.rejectModal .box { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 20px; width: 460px; max-width: 92vw; }
|
|
171
|
+
.rejectModal h3 { margin-top: 0; }
|
|
172
|
+
.rejectModal p { color: var(--fg-muted); font-size: 13px; }
|
|
173
|
+
.rejectModal textarea { width: 100%; min-height: 80px; }
|
|
174
|
+
.rejectModal .row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
|
|
175
|
+
|
|
176
|
+
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--fg); color: var(--bg);
|
|
177
|
+
padding: 10px 18px; border-radius: 8px; font-size: 13px; z-index: 60; box-shadow: 0 4px 16px #0004; }
|
|
178
|
+
|
|
179
|
+
.empty { color: var(--fg-muted); padding: 40px; text-align: center; }
|