create-claudeportal 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/bin/cli.js +37 -0
- package/dist/assets/index-BBU5K5iA.js +132 -0
- package/dist/assets/index-fNmv07eE.css +1 -0
- package/dist/index.html +13 -0
- package/index.html +12 -0
- package/mockups/01-chat-conversation-v2.html +803 -0
- package/mockups/01-chat-conversation.html +592 -0
- package/mockups/02-activity-feed.html +648 -0
- package/mockups/03-focused-workspace.html +680 -0
- package/mockups/04-documents-mode.html +1556 -0
- package/package.json +54 -0
- package/server/index.js +140 -0
- package/server/lib/detect-tools.js +93 -0
- package/server/lib/file-scanner.js +46 -0
- package/server/lib/file-watcher.js +45 -0
- package/server/lib/fix-npm-prefix.js +61 -0
- package/server/lib/folder-scanner.js +43 -0
- package/server/lib/install-tools.js +122 -0
- package/server/lib/platform.js +18 -0
- package/server/lib/sse-manager.js +36 -0
- package/server/lib/terminal.js +95 -0
- package/server/lib/validate-folder-path.js +17 -0
- package/server/lib/validate-path.js +13 -0
- package/server/routes/detect.js +64 -0
- package/server/routes/doc-events.js +94 -0
- package/server/routes/events.js +37 -0
- package/server/routes/folder.js +195 -0
- package/server/routes/github.js +21 -0
- package/server/routes/health.js +16 -0
- package/server/routes/install.js +102 -0
- package/server/routes/project.js +18 -0
- package/server/routes/scaffold.js +45 -0
- package/skills-lock.json +15 -0
- package/tsconfig.app.json +17 -0
- package/tsconfig.node.json +11 -0
- package/tsconfig.tsbuildinfo +1 -0
- package/ui/app.js +747 -0
- package/ui/index.html +272 -0
- package/ui/styles.css +788 -0
package/ui/index.html
ADDED
|
@@ -0,0 +1,272 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Greenhouse Setup</title>
|
|
7
|
+
<link rel="stylesheet" href="/styles.css">
|
|
8
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.min.css">
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div id="app">
|
|
12
|
+
<!-- Single Setup Screen: Intent + Tools -->
|
|
13
|
+
<!-- Screen 1: Choose your path -->
|
|
14
|
+
<section id="screen-setup" class="screen active">
|
|
15
|
+
<div class="screen-inner">
|
|
16
|
+
<div class="logo">🌱</div>
|
|
17
|
+
<h1>What would you like to do?</h1>
|
|
18
|
+
<p class="subtitle">Choose how you want to work with Claude Code.</p>
|
|
19
|
+
|
|
20
|
+
<div class="path-options">
|
|
21
|
+
<button class="path-card" id="path-new">
|
|
22
|
+
<span class="path-icon">🚀</span>
|
|
23
|
+
<span class="path-title">Start a new project</span>
|
|
24
|
+
<span class="path-desc">Claude builds an app from your description</span>
|
|
25
|
+
</button>
|
|
26
|
+
<button class="path-card" id="path-existing">
|
|
27
|
+
<span class="path-icon">📂</span>
|
|
28
|
+
<span class="path-title">Open an existing project</span>
|
|
29
|
+
<span class="path-desc">Connect Claude to a folder on your machine</span>
|
|
30
|
+
</button>
|
|
31
|
+
</div>
|
|
32
|
+
|
|
33
|
+
<!-- Tool status — runs in background -->
|
|
34
|
+
<div id="tools-status" class="tools-status">
|
|
35
|
+
<div id="tools-list" class="tools-list-inline">
|
|
36
|
+
<span class="tool-check"><span class="spinner-small"></span> Checking your setup...</span>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<!-- Error recovery -->
|
|
41
|
+
<div id="error-recovery" class="error-recovery" style="display: none;">
|
|
42
|
+
<div class="error-card">
|
|
43
|
+
<h3>Something went wrong</h3>
|
|
44
|
+
<p id="error-message"></p>
|
|
45
|
+
<div class="error-help">
|
|
46
|
+
<p>This usually happens because:</p>
|
|
47
|
+
<ul>
|
|
48
|
+
<li>Your internet connection dropped</li>
|
|
49
|
+
<li>A firewall is blocking npm</li>
|
|
50
|
+
<li>npm is temporarily down</li>
|
|
51
|
+
</ul>
|
|
52
|
+
<p><strong>What to try:</strong></p>
|
|
53
|
+
<ol>
|
|
54
|
+
<li>Check your internet connection</li>
|
|
55
|
+
<li>If you're on a work/school network, try your phone's hotspot instead</li>
|
|
56
|
+
</ol>
|
|
57
|
+
</div>
|
|
58
|
+
<div class="error-actions">
|
|
59
|
+
<button id="btn-retry" class="btn btn-primary">Try Again</button>
|
|
60
|
+
<button id="btn-skip" class="btn btn-secondary">Skip This Tool</button>
|
|
61
|
+
</div>
|
|
62
|
+
<details class="error-details">
|
|
63
|
+
<summary>Technical details (for your instructor)</summary>
|
|
64
|
+
<pre id="error-technical"></pre>
|
|
65
|
+
</details>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</section>
|
|
70
|
+
|
|
71
|
+
<!-- Screen 2a: New project setup -->
|
|
72
|
+
<section id="screen-new" class="screen">
|
|
73
|
+
<div class="screen-inner">
|
|
74
|
+
<div class="logo">🌱</div>
|
|
75
|
+
<button class="btn-back" id="btn-back-new">← Back</button>
|
|
76
|
+
<h1>Start a new project</h1>
|
|
77
|
+
<p class="subtitle">We'll create a folder in ~/Claude and set up a starter template.</p>
|
|
78
|
+
|
|
79
|
+
<div class="intent-input-group">
|
|
80
|
+
<input type="text" id="project-name"
|
|
81
|
+
placeholder="e.g. my-portfolio"
|
|
82
|
+
autocomplete="off" autofocus>
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
<div class="intent-examples" id="intent-examples">
|
|
86
|
+
<span class="examples-label">Try:</span>
|
|
87
|
+
<button class="example-btn" data-example="my-portfolio">my-portfolio</button>
|
|
88
|
+
<button class="example-btn" data-example="habit-tracker">habit-tracker</button>
|
|
89
|
+
<button class="example-btn" data-example="sales-dashboard">sales-dashboard</button>
|
|
90
|
+
<button class="example-btn" data-example="todo-app">todo-app</button>
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
<div id="description-step" style="display: none;">
|
|
94
|
+
<h2 class="step-heading">Describe it in a sentence</h2>
|
|
95
|
+
<p class="subtitle">We'll build a quick prototype to show you what's possible.</p>
|
|
96
|
+
<div class="intent-input-group">
|
|
97
|
+
<input type="text" id="intent-description"
|
|
98
|
+
placeholder="e.g. A portfolio site for my photography business"
|
|
99
|
+
autocomplete="off">
|
|
100
|
+
<button id="btn-start-building" class="btn btn-primary" disabled>
|
|
101
|
+
Let's Build
|
|
102
|
+
</button>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
</section>
|
|
107
|
+
|
|
108
|
+
<!-- Screen 2b: Existing project setup -->
|
|
109
|
+
<section id="screen-existing" class="screen">
|
|
110
|
+
<div class="screen-inner">
|
|
111
|
+
<div class="logo">🌱</div>
|
|
112
|
+
<button class="btn-back" id="btn-back-existing">← Back</button>
|
|
113
|
+
<h1>Open an existing project</h1>
|
|
114
|
+
<p class="subtitle">Paste the path to your project folder.</p>
|
|
115
|
+
|
|
116
|
+
<div class="intent-input-group">
|
|
117
|
+
<input type="text" id="existing-path"
|
|
118
|
+
placeholder="e.g. /Users/you/projects/my-app"
|
|
119
|
+
autocomplete="off" autofocus>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
<p class="path-hint">Tip: drag a folder from Finder into this field to paste its path.</p>
|
|
123
|
+
|
|
124
|
+
<div id="drive-shortcuts" class="drive-shortcuts" style="display: none;">
|
|
125
|
+
<span class="examples-label">Quick access:</span>
|
|
126
|
+
<div id="drive-list" class="drive-list"></div>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
<div id="existing-context" style="display: none;">
|
|
130
|
+
<h2 class="step-heading">What pain point would you like AI to solve?</h2>
|
|
131
|
+
<p class="subtitle">Describe the problem you're running into.</p>
|
|
132
|
+
<div class="intent-input-group">
|
|
133
|
+
<input type="text" id="existing-pain"
|
|
134
|
+
placeholder="e.g. My CSS is a mess and nothing looks consistent"
|
|
135
|
+
autocomplete="off">
|
|
136
|
+
</div>
|
|
137
|
+
|
|
138
|
+
<div id="existing-outcome-step" style="display: none;">
|
|
139
|
+
<h2 class="step-heading">What's the dream outcome?</h2>
|
|
140
|
+
<p class="subtitle">What does success look like when this is done?</p>
|
|
141
|
+
<div class="intent-input-group">
|
|
142
|
+
<input type="text" id="existing-outcome"
|
|
143
|
+
placeholder="e.g. A clean, consistent design system across all pages"
|
|
144
|
+
autocomplete="off">
|
|
145
|
+
<button id="btn-open-existing" class="btn btn-primary" disabled>
|
|
146
|
+
Let's Go
|
|
147
|
+
</button>
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
</section>
|
|
153
|
+
|
|
154
|
+
<!-- Screen 3: Build (Terminal) -->
|
|
155
|
+
<section id="screen-build" class="screen">
|
|
156
|
+
<div class="build-layout">
|
|
157
|
+
<div class="build-sidebar hidden" id="build-sidebar">
|
|
158
|
+
<div class="build-header">
|
|
159
|
+
<span class="logo-small">🌱</span>
|
|
160
|
+
<span>Greenhouse</span>
|
|
161
|
+
</div>
|
|
162
|
+
|
|
163
|
+
<!-- Project Section -->
|
|
164
|
+
<div class="sidebar-section" id="project-section">
|
|
165
|
+
<h4>PROJECT</h4>
|
|
166
|
+
<p class="project-path" id="current-project-path">~/Claude</p>
|
|
167
|
+
<div class="project-actions">
|
|
168
|
+
<button id="btn-clone-github" class="btn btn-small btn-block">Clone from GitHub</button>
|
|
169
|
+
<button id="btn-new-project" class="btn btn-small btn-block btn-secondary">+ New Project</button>
|
|
170
|
+
</div>
|
|
171
|
+
<div id="clone-repo-list" class="repo-list" style="display:none;">
|
|
172
|
+
<div class="repo-list-header">
|
|
173
|
+
<span>Your Repositories</span>
|
|
174
|
+
<button id="btn-close-repos" class="btn-icon">✕</button>
|
|
175
|
+
</div>
|
|
176
|
+
<div id="repo-items" class="repo-items"></div>
|
|
177
|
+
</div>
|
|
178
|
+
</div>
|
|
179
|
+
|
|
180
|
+
<!-- Prompts Section -->
|
|
181
|
+
<div class="sidebar-section" id="prompts-section">
|
|
182
|
+
<h4>PROMPTS</h4>
|
|
183
|
+
<div id="standard-prompts">
|
|
184
|
+
<details class="prompt-group" open>
|
|
185
|
+
<summary>Build Features</summary>
|
|
186
|
+
<div class="prompt-list">
|
|
187
|
+
<button class="prompt-btn" data-prompt="Add a login page with email and password authentication" data-auto="false">Add login page</button>
|
|
188
|
+
<button class="prompt-btn" data-prompt="Create a dashboard page with a sidebar navigation component" data-auto="false">Dashboard with nav</button>
|
|
189
|
+
<button class="prompt-btn" data-prompt="Add a user profile page where users can edit their details" data-auto="false">User profile page</button>
|
|
190
|
+
<button class="prompt-btn" data-prompt="Build a settings page with a dark mode / light mode toggle" data-auto="false">Settings + theme toggle</button>
|
|
191
|
+
<button class="prompt-btn" data-prompt="Add a responsive navbar with mobile hamburger menu" data-auto="false">Responsive navbar</button>
|
|
192
|
+
</div>
|
|
193
|
+
</details>
|
|
194
|
+
<details class="prompt-group">
|
|
195
|
+
<summary>Understand</summary>
|
|
196
|
+
<div class="prompt-list">
|
|
197
|
+
<button class="prompt-btn" data-prompt="Explain this codebase — what does it do, how is it structured, and what are the key files?" data-auto="false">Explain this codebase</button>
|
|
198
|
+
<button class="prompt-btn" data-prompt="What technologies and frameworks does this project use?" data-auto="false">What tech stack is this?</button>
|
|
199
|
+
<button class="prompt-btn" data-prompt="Find the main entry point and trace the flow of the application" data-auto="false">Trace the app flow</button>
|
|
200
|
+
</div>
|
|
201
|
+
</details>
|
|
202
|
+
<details class="prompt-group">
|
|
203
|
+
<summary>Review Code</summary>
|
|
204
|
+
<div class="prompt-list">
|
|
205
|
+
<button class="prompt-btn" data-prompt="Review my code for bugs, security issues, and logic errors" data-auto="false">Review for bugs</button>
|
|
206
|
+
<button class="prompt-btn" data-prompt="Check all my components for accessibility issues (WCAG compliance)" data-auto="false">Check accessibility</button>
|
|
207
|
+
<button class="prompt-btn" data-prompt="Suggest performance improvements for my app" data-auto="false">Performance review</button>
|
|
208
|
+
</div>
|
|
209
|
+
</details>
|
|
210
|
+
<details class="prompt-group">
|
|
211
|
+
<summary>Workflow</summary>
|
|
212
|
+
<div class="prompt-list">
|
|
213
|
+
<button class="prompt-btn" data-prompt="npm run dev" data-auto="true">Start dev server</button>
|
|
214
|
+
<button class="prompt-btn" data-prompt="Review my changes and commit them with a descriptive message" data-auto="false">Commit changes</button>
|
|
215
|
+
<button class="prompt-btn" data-prompt="git checkout -b feature/" data-auto="false">New git branch</button>
|
|
216
|
+
</div>
|
|
217
|
+
</details>
|
|
218
|
+
</div>
|
|
219
|
+
</div>
|
|
220
|
+
|
|
221
|
+
<!-- Resources -->
|
|
222
|
+
<div class="sidebar-section">
|
|
223
|
+
<h4>RESOURCES</h4>
|
|
224
|
+
<a href="https://docs.anthropic.com/en/docs/claude-code" target="_blank">Claude Code Docs</a>
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
|
|
228
|
+
<div class="build-terminal" style="position: relative;">
|
|
229
|
+
<button id="sidebar-reopen" class="sidebar-toggle-tab" title="Show sidebar">▶</button>
|
|
230
|
+
<div class="terminal-toolbar">
|
|
231
|
+
<div class="terminal-controls">
|
|
232
|
+
<button id="btn-toggle-sidebar" class="btn-icon" title="Toggle sidebar">☰</button>
|
|
233
|
+
<span class="terminal-title">Terminal</span>
|
|
234
|
+
</div>
|
|
235
|
+
<div class="terminal-controls">
|
|
236
|
+
<button id="btn-toggle-preview" class="btn-icon" title="Toggle preview">👁</button>
|
|
237
|
+
</div>
|
|
238
|
+
</div>
|
|
239
|
+
<div id="terminal-container"></div>
|
|
240
|
+
<div id="terminal-fallback" style="display: none;">
|
|
241
|
+
<p>Embedded terminal is not available on your system.</p>
|
|
242
|
+
<button id="btn-open-native" class="btn btn-primary">Open Native Terminal</button>
|
|
243
|
+
<p class="text-muted">Then run: <code>cd ~/Claude && claude</code></p>
|
|
244
|
+
</div>
|
|
245
|
+
</div>
|
|
246
|
+
|
|
247
|
+
<div class="build-preview hidden" id="build-preview">
|
|
248
|
+
<div class="preview-toolbar">
|
|
249
|
+
<span class="preview-url" id="preview-url">localhost:5173</span>
|
|
250
|
+
<div class="terminal-controls">
|
|
251
|
+
<button id="btn-refresh-preview" class="btn-icon" title="Refresh">↻</button>
|
|
252
|
+
<button id="btn-close-preview" class="btn-icon" title="Close">✕</button>
|
|
253
|
+
</div>
|
|
254
|
+
</div>
|
|
255
|
+
<div class="preview-container">
|
|
256
|
+
<div id="preview-placeholder" class="preview-placeholder">
|
|
257
|
+
<p>Start your dev server to see your app here</p>
|
|
258
|
+
<button class="prompt-btn" data-prompt="npm run dev" data-auto="true">npm run dev</button>
|
|
259
|
+
</div>
|
|
260
|
+
<iframe id="preview-iframe" style="display:none;" sandbox="allow-scripts allow-same-origin allow-forms allow-popups"></iframe>
|
|
261
|
+
</div>
|
|
262
|
+
</div>
|
|
263
|
+
</div>
|
|
264
|
+
</section>
|
|
265
|
+
</div>
|
|
266
|
+
|
|
267
|
+
<script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
|
|
268
|
+
<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
|
|
269
|
+
<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-web-links@0.11.0/lib/addon-web-links.min.js"></script>
|
|
270
|
+
<script src="/app.js"></script>
|
|
271
|
+
</body>
|
|
272
|
+
</html>
|