-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathsetup.html
More file actions
138 lines (131 loc) · 6.1 KB
/
Copy pathsetup.html
File metadata and controls
138 lines (131 loc) · 6.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Copilot Proxy — Remote Setup</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
max-width: 640px; margin: 40px auto; padding: 0 20px;
color: #1a1a1a; background: #fafafa;
}
h1 { margin-bottom: 8px; font-size: 1.5rem; }
.subtitle { color: #666; margin-bottom: 24px; }
.step {
margin: 16px 0; padding: 16px; background: #fff;
border: 1px solid #e0e0e0; border-radius: 8px;
}
.step h3 { margin-bottom: 10px; font-size: 1rem; color: #333; }
.cmd {
position: relative; display: flex; align-items: center; gap: 8px;
}
.cmd pre {
flex: 1; background: #1e1e1e; color: #d4d4d4;
padding: 10px 14px; border-radius: 4px;
overflow-x: auto; font-size: 0.875rem;
}
.copy-btn {
padding: 6px 14px; background: #0078d4; color: #fff;
border: none; border-radius: 4px; cursor: pointer;
font-size: 0.8rem; white-space: nowrap;
}
.copy-btn:hover { background: #106ebe; }
.copy-btn.copied { background: #107c10; }
.note { margin-top: 6px; font-size: 0.8rem; color: #888; }
.where { font-size: 0.75rem; color: #0078d4; font-weight: 600; text-transform: uppercase; margin-bottom: 6px; }
</style>
</head>
<body>
<h1>Copilot Proxy — Remote Setup</h1>
<p class="subtitle">Configure Claude Code on a remote device to use this proxy.</p>
<div class="step">
<p class="where">On host machine</p>
<h3>Step 1: Start the setup approval server</h3>
<div class="cmd">
<pre><code>.\copilotproxy.ps1 setup-claude-remote</code></pre>
<button class="copy-btn" onclick="copyCmd(this)">Copy</button>
</div>
<p class="note">This starts an interactive approval server. When a remote device connects,
it will show the hostname/IP and prompt you to approve (y/N). Keep it running.</p>
</div>
<div class="step">
<p class="where">On remote device</p>
<h3>Step 2: Download the setup script</h3>
<p><button class="copy-btn" id="download-btn" onclick="downloadScript()" style="padding:10px 20px;font-size:1rem;">Download claude-copilot-proxy.sh</button></p>
<p class="note" id="download-note">Requires approval from the host machine (Step 1). The host will see your hostname/IP.</p>
</div>
<div class="step">
<p class="where">On remote device</p>
<h3>Step 3: Review the script</h3>
<div class="cmd">
<pre><code>cat claude-copilot-proxy.sh</code></pre>
<button class="copy-btn" onclick="copyCmd(this)">Copy</button>
</div>
<p class="note">Always review scripts before executing them. Verify the proxy URL and token look correct.</p>
</div>
<div class="step">
<p class="where">On remote device</p>
<h3>Step 4: Run the setup script</h3>
<div class="cmd">
<pre><code>sh claude-copilot-proxy.sh</code></pre>
<button class="copy-btn" onclick="copyCmd(this)">Copy</button>
</div>
<p class="note">Handles everything: installs devtunnel (if needed), logs in, connects in background with auto-reconnect, and configures Claude Code.
<br>Other commands: <code>sh claude-copilot-proxy.sh reconnect</code>, <code>sh claude-copilot-proxy.sh stop</code>, <code>sh claude-copilot-proxy.sh disable</code></p>
</div>
<script>
function downloadScript() {
var btn = document.getElementById('download-btn');
var note = document.getElementById('download-note');
btn.disabled = true;
btn.textContent = 'Waiting for approval...';
note.textContent = 'Request sent. Approve on the host machine.';
note.style.color = '#0078d4';
fetch('/setup.sh')
.then(function(res) {
if (res.status === 502) {
note.textContent = 'Error: Approval server is not running. Run .\\copilotproxy.ps1 setup-claude-remote on the host first.';
note.style.color = '#d32f2f';
btn.textContent = 'Download claude-copilot-proxy.sh';
btn.disabled = false;
return;
}
if (!res.ok) {
note.textContent = 'Error: ' + res.status + ' ' + res.statusText;
note.style.color = '#d32f2f';
btn.textContent = 'Download claude-copilot-proxy.sh';
btn.disabled = false;
return;
}
return res.text().then(function(text) {
var blob = new Blob([text], { type: 'text/plain' });
var a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'claude-copilot-proxy.sh';
a.click();
URL.revokeObjectURL(a.href);
note.textContent = 'Downloaded! Review it with: cat ~/Downloads/claude-copilot-proxy.sh';
note.style.color = '#107c10';
btn.textContent = 'Downloaded!';
});
})
.catch(function(err) {
note.textContent = 'Network error: ' + err.message;
note.style.color = '#d32f2f';
btn.textContent = 'Download claude-copilot-proxy.sh';
btn.disabled = false;
});
}
function copyCmd(btn) {
const code = btn.parentElement.querySelector('code').textContent;
navigator.clipboard.writeText(code).then(() => {
btn.textContent = 'Copied!';
btn.classList.add('copied');
setTimeout(() => { btn.textContent = 'Copy'; btn.classList.remove('copied'); }, 2000);
});
}
</script>
</body>
</html>