-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
205 lines (190 loc) · 7.71 KB
/
Copy pathindex.html
File metadata and controls
205 lines (190 loc) · 7.71 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AWS Transform</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Top Browser-like bar -->
<div class="browser-bar">
<div class="browser-tabs">
<div class="browser-tab active">AWS Transform</div>
</div>
</div>
<!-- Navigation Bar -->
<div class="nav-bar">
<div class="nav-left">
<div class="nav-logo">
<span class="logo-icon">⚙</span>
<span class="logo-text">AWS Transform</span>
</div>
<div class="nav-breadcrumb">
<a href="#">Workspaces</a>
<span class="breadcrumb-sep">›</span>
<a href="#">repo-discovery</a>
<span class="breadcrumb-sep">›</span>
<span>Arena</span>
</div>
</div>
<div class="nav-right">
<span class="nav-link">Virginia (us-east-1)</span>
<div class="nav-avatar">●</div>
</div>
</div>
<!-- Main Layout -->
<div class="main-layout">
<!-- Left Sidebar - Job Plan -->
<div class="sidebar" id="sidebar">
<div class="sidebar-header">
<h2>Job plan</h2>
<button class="sidebar-collapse-btn" title="Collapse">☰</button>
</div>
<div class="sidebar-steps">
<!-- Step 1: Get resource -->
<div class="step-section">
<div class="step-header" onclick="toggleStep(this)">
<span class="step-chevron">▾</span>
<span class="step-icon">📄</span>
<span class="step-title">Get resource</span>
</div>
<div class="step-body">
<p class="step-desc">Connect to GitHub to discover repositories</p>
<span class="step-badge completed">Completed</span>
</div>
</div>
<!-- Step 2: Choose connector type -->
<div class="step-section">
<div class="step-header" onclick="toggleStep(this)">
<span class="step-chevron">▾</span>
<span class="step-icon">🔌</span>
<span class="step-title">Choose connector type</span>
</div>
<div class="step-body">
<p class="step-desc">GitHub API connector configured</p>
<span class="step-badge completed">Completed</span>
</div>
</div>
<!-- Step 3: Invite collaborators -->
<div class="step-section">
<div class="step-header" onclick="toggleStep(this)">
<span class="step-chevron">▾</span>
<span class="step-icon">👥</span>
<span class="step-title">Invite collaborators</span>
</div>
<div class="step-body">
<p class="step-desc">Optional — skip for now</p>
</div>
</div>
<!-- Step 4: Discover -->
<div class="step-section" id="stepDiscover">
<div class="step-header" onclick="handleStepClick('stepDiscover'); toggleStep(this)">
<span class="step-chevron">▾</span>
<span class="step-icon">🔎</span>
<span class="step-title">Discover</span>
</div>
<div class="step-body">
<p class="step-desc">Discover repositories from GitHub</p>
<div class="step-substeps" id="discoverSubsteps">
<div class="substep">
<span class="substep-icon done">✓</span>
<span>Discover repositories</span>
</div>
<div class="substep">
<span class="substep-icon done">✓</span>
<span>GitHub upload</span>
</div>
</div>
<span class="step-badge completed" id="discoverBadge">Completed</span>
</div>
</div>
<!-- Step 5: Assess -->
<div class="step-section" id="stepAssess">
<div class="step-header" onclick="handleStepClick('stepAssess'); toggleStep(this)">
<span class="step-chevron">▾</span>
<span class="step-icon">📊</span>
<span class="step-title">Assess</span>
</div>
<div class="step-body">
<p class="step-desc">Assess repositories for transformation readiness</p>
<div class="step-substeps" id="assessSubsteps"></div>
<span class="step-badge in-progress" id="assessBadge" style="display:none">In progress</span>
</div>
</div>
<!-- Step 6: Prepare for transformation -->
<div class="step-section" id="stepPrepare">
<div class="step-header" onclick="handleStepClick('stepPrepare'); toggleStep(this)">
<span class="step-chevron">▾</span>
<span class="step-icon">📝</span>
<span class="step-title">Prepare for transformation</span>
</div>
<div class="step-body">
<p class="step-desc">Configure transformation options and generate plan</p>
<div class="step-substeps" id="prepareSubsteps"></div>
<span class="step-badge" id="prepareBadge" style="display:none"></span>
</div>
</div>
<!-- Step 7: Transform -->
<div class="step-section" id="stepTransform">
<div class="step-header" onclick="handleStepClick('stepTransform'); toggleStep(this)">
<span class="step-chevron">▾</span>
<span class="step-icon">⚡</span>
<span class="step-title">Transform</span>
</div>
<div class="step-body">
<p class="step-desc">Execute transformation on selected repositories</p>
<div class="step-substeps" id="transformSubsteps"></div>
<span class="step-badge" id="transformBadge" style="display:none"></span>
</div>
</div>
</div>
</div>
<!-- Center Content - Chat Area -->
<div class="center-area">
<div class="chat-area" id="chatArea">
<!-- Messages populated by JS -->
</div>
<!-- Thinking Panel (collapsible, above chat input) -->
<div class="thinking-panel" id="thinkingPanel" style="display:none">
<div class="thinking-panel-header">
<span class="thinking-panel-icon"><span class="spinner"></span></span>
<span class="thinking-panel-label">Agent is thinking...</span>
<button class="thinking-panel-toggle" onclick="hideThinkingPanel()">▼ Hide</button>
</div>
<div class="thinking-panel-content" id="thinkingContent">
Analyzing repository structure and dependencies...
</div>
</div>
<div class="thinking-panel-collapsed" id="thinkingPanelCollapsed" style="display:none" onclick="reshowThinkingPanel()">
<span class="spinner"></span>
<span>Agent is thinking...</span>
<span class="thinking-panel-show-btn">▲ Show</span>
</div>
<div class="chat-input-bar">
<div class="chat-input-container">
<button class="chat-upload-btn" title="Upload file">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M8 1v10M8 1L4.5 4.5M8 1l3.5 3.5M2 11v2.5a1.5 1.5 0 001.5 1.5h9a1.5 1.5 0 001.5-1.5V11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<input type="text" id="chatInput" placeholder="Ask a question or chat with the agent. Use @ to reference tasks in the Job plan.">
<button class="chat-send-btn" onclick="sendChat()">➤</button>
</div>
<div class="chat-footer">AWS Transform uses generative AI. You may need to verify responses.</div>
</div>
</div>
<!-- Right Panel (resizable) -->
<div class="right-panel-resize-handle" id="rightPanelResizeHandle"></div>
<div class="right-panel" id="rightPanel">
<div class="right-panel-header">
<h3 id="rightPanelTitle">Assessment Summary</h3>
</div>
<div class="right-panel-content" id="rightPanelContent">
<!-- Populated by JS -->
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>