FlowHub/index.html at main · chenweil/FlowHub · GitHub

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
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <script>
      (function () {
        var t = localStorage.getItem('iflow-theme');
        if (t === 'light') document.documentElement.classList.add('theme-light');
        else if (t === 'dark') document.documentElement.classList.add('theme-dark');
      })();
    </script>
    <link rel="stylesheet" href="/src/styles.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flow hub</title>
  </head>
  <body>
    <div id="app">
      <!-- 侧边栏：Agent 列表 -->
      <aside class="sidebar">
        <div class="sidebar-header">
          <h1>flow hub</h1>
          <button id="add-agent-btn" class="btn-primary">+ 添加 Agent</button>
        </div>
        <div class="agent-list" id="agent-list">
          <!-- Agent 列表将在这里动态生成 -->
        </div>
        <div class="session-section">
          <div class="session-section-title">会话历史</div>
          <div class="session-list" id="session-list">
            <div class="session-empty">选择 Agent 后显示会话历史</div>
          </div>
        </div>
        <div class="sidebar-footer">
          <div class="connection-status" id="connection-status">
            <span class="status-dot disconnected"></span>
            <span>未连接</span>
          </div>
          <div class="sidebar-footer-actions">
            <button id="clear-all-sessions" class="btn-text">清除当前 Agent 会话</button>
            <div id="app-version" class="app-version-inline">v--</div>
          </div>
        </div>
      </aside>

      <!-- 主内容区 -->
      <main class="main-content">
        <!-- 顶部工具栏 -->
        <header class="toolbar">
          <div class="current-agent">
            <h2 id="current-agent-name">选择一个 Agent</h2>
            <span id="current-agent-status" class="badge">离线</span>
            <div class="model-selector">
              <button
                id="current-agent-model-btn"
                class="model-selector-btn"
                type="button"
                disabled
                aria-expanded="false"
              >
                <span id="current-agent-model-text">模型：未连接</span>
                <span class="model-selector-caret">▾</span>
              </button>
              <div id="current-agent-model-menu" class="model-selector-menu hidden"></div>
            </div>
          </div>
          <div class="toolbar-actions">
            <button id="open-settings-btn" class="btn-secondary" type="button" aria-label="打开设置">设置</button>
            <button id="toggle-think-btn" class="btn-secondary think-toggle-btn" aria-label="切换思考模式" disabled>思考：关</button>
            <button id="new-session-btn" class="btn-secondary" disabled>新建会话</button>

            <div class="toolbar-more-wrapper">
              <button id="toolbar-more-btn" class="btn-secondary" type="button" aria-label="更多操作">更多 ⋯</button>
              <div id="toolbar-more-menu" class="toolbar-more-menu hidden">
                <button id="open-tool-calls-btn" class="toolbar-menu-item" aria-label="打开工具调用面板">
                  <span class="toolbar-menu-icon">🔧</span>
                  <span class="toolbar-menu-text">工具调用</span>
                </button>
                <button id="open-git-changes-btn" class="toolbar-menu-item" aria-label="打开文件变更面板">
                  <span class="toolbar-menu-icon">📝</span>
                  <span class="toolbar-menu-text">文件变更</span>
                </button>
                <button id="open-capability-center-btn" class="toolbar-menu-item" aria-label="打开能力中心">
                  <span class="toolbar-menu-icon">🧩</span>
                  <span class="toolbar-menu-text">能力中心</span>
                </button>
                <div class="toolbar-menu-divider"></div>
                <button id="clear-chat-btn" class="toolbar-menu-item toolbar-menu-item-danger" disabled>
                  <span class="toolbar-menu-icon">🗑️</span>
                  <span class="toolbar-menu-text">清空当前会话</span>
                </button>
              </div>
            </div>
          </div>
        </header>

        <!-- 对话区域 -->
        <div class="chat-container">
          <div id="chat-messages" class="chat-messages" role="log" aria-label="聊天消息列表">
            <div class="welcome-message">
              <h3>👋 欢迎使用 flow hub</h3>
              <p>从左侧选择一个 Agent 开始对话，或添加新的 Agent。</p>
            </div>
          </div>

          <!-- 工具调用面板 -->
          <div id="tool-calls-panel" class="tool-calls-panel hidden">
            <div class="tool-calls-header">
              <h4>🔧 工具调用</h4>
              <button id="close-tool-panel" class="btn-icon" aria-label="关闭工具调用面板">×</button>
            </div>
            <div id="tool-calls-list" class="tool-calls-list">
              <!-- 工具调用将在这里显示 -->
            </div>
          </div>

          <div id="git-changes-panel" class="git-changes-panel hidden">
            <div class="git-changes-header">
              <div class="git-changes-title-row">
                <h4>📝 文件变更</h4>
                <span id="git-changes-refresh-time" class="git-changes-refresh-time">未刷新</span>
              </div>
              <div class="git-changes-actions">
                <button id="refresh-git-changes" class="btn-icon" title="刷新文件变更" aria-label="刷新文件变更">↻</button>
                <button id="close-git-panel" class="btn-icon" title="关闭文件变更" aria-label="关闭文件变更面板">×</button>
              </div>
            </div>
            <div id="git-changes-list" class="git-changes-list">
              <!-- 文件变更将在这里显示 -->
            </div>
          </div>
        </div>

        <!-- 输入区域 -->
        <div class="input-container">
          <div class="input-wrapper">
            <div class="composer-pane">
              <div id="slash-command-menu" class="slash-command-menu hidden"></div>
              <textarea
                id="message-input"
                placeholder="输入消息..."
                rows="1"
                disabled
                aria-label="消息输入框"
              ></textarea>
            </div>
            <button id="send-btn" class="btn-send" disabled aria-label="发送消息">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <line x1="22" y1="2" x2="11" y2="13"></line>
                <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
              </svg>
            </button>
          </div>
          <div class="input-hints">
            <span id="input-status-hint">按 Enter 发送，Shift + Enter 换行</span>
            <div id="context-usage-wrapper" class="context-usage-wrapper" style="display:none">
              <div id="context-usage-bar" class="context-usage-bar" title="上下文使用量">
                <div class="context-usage-fill" id="context-usage-fill"></div>
              </div>
              <span id="context-usage-text" class="context-usage-text"></span>
            </div>
          </div>
        </div>
      </main>
    </div>

    <!-- 添加 Agent 弹窗 -->
    <div id="add-agent-modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="add-agent-modal-title">
      <div class="modal-content">
        <div class="modal-header">
          <h3 id="add-agent-modal-title">添加 iFlow Agent</h3>
          <button id="close-modal" class="btn-icon" aria-label="关闭添加 Agent 弹窗">×</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="agent-name">Agent 名称</label>
            <input type="text" id="agent-name" placeholder="我的 iFlow" value="iFlow" autocomplete="off">
          </div>
          <div class="form-group">
            <label for="iflow-path">iFlow CLI 路径（可选）</label>
            <input type="text" id="iflow-path" placeholder="iflow（使用系统 PATH）" autocomplete="off">
          </div>
          <div class="form-group">
            <label for="workspace-path">工作目录</label>
            <div class="workspace-path-row">
              <input type="text" id="workspace-path" placeholder="/path/to/workspace" value="/Users/chenweilong/playground" autocomplete="off">
              <button id="browse-workspace-path" class="btn-secondary btn-compact" type="button">选择文件夹</button>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button id="cancel-add-agent" class="btn-secondary">取消</button>
          <button id="confirm-add-agent" class="btn-primary">连接</button>
        </div>
      </div>
    </div>

    <!-- 编辑 Agent 名称弹窗 -->
    <div id="rename-agent-modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="rename-agent-modal-title">
      <div class="modal-content">
        <div class="modal-header">
          <h3 id="rename-agent-modal-title">编辑 Agent 名称</h3>
          <button id="close-rename-agent-modal" class="btn-icon" aria-label="关闭重命名弹窗">×</button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="rename-agent-name">Agent 名称</label>
            <input type="text" id="rename-agent-name" placeholder="请输入 Agent 名称" autocomplete="off">
          </div>
        </div>
        <div class="modal-footer">
          <button id="cancel-rename-agent" class="btn-secondary">取消</button>
          <button id="confirm-rename-agent" class="btn-primary">保存</button>
        </div>
      </div>
    </div>

    <!-- 设置弹窗 -->
    <div id="settings-modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="settings-modal-title">
      <div class="modal-content settings-modal-content">
        <div class="modal-header">
          <h3 id="settings-modal-title">设置</h3>
          <button id="close-settings-modal" class="btn-icon" aria-label="关闭设置">×</button>
        </div>
        <div class="modal-body settings-modal-body">
          <div class="settings-group">
            <div class="settings-group-title">刷新后重连</div>
            <div class="auto-reconnect-control">
              <span class="auto-reconnect-label">重连方式</span>
              <select
                id="auto-reconnect-mode-select"
                class="auto-reconnect-select"
                aria-label="自动重连模式"
                title="刷新后重连方式"
              >
                <option value="last">最后一个</option>
                <option value="all">全部</option>
                <option value="off">关闭</option>
              </select>
            </div>
          </div>

          <div class="settings-group">
            <div class="settings-group-title">提醒</div>
            <div class="notification-controls settings-notification-controls">
              <div class="notification-delay-group" aria-label="提醒延迟">
                <span class="notification-delay-label">延迟</span>
                <input
                  id="notification-delay-minute"
                  class="notification-delay-input"
                  type="number"
                  min="0"
                  max="59"
                  step="1"
                  inputmode="numeric"
                  title="提醒延迟分钟"
                  aria-label="提醒延迟分钟"
                />
                <span class="notification-delay-unit">分</span>
                <input
                  id="notification-delay-second"
                  class="notification-delay-input"
                  type="number"
                  min="0"
                  max="59"
                  step="1"
                  inputmode="numeric"
                  title="提醒延迟秒"
                  aria-label="提醒延迟秒"
                />
                <span class="notification-delay-unit">秒</span>
              </div>
              <select
                id="notification-sound-select"
                class="notification-sound-select"
                aria-label="对话完成提示音"
                title="对话完成提示音"
              ></select>
              <button
                id="notification-sound-upload-btn"
                class="btn-secondary btn-compact notification-upload-btn"
                type="button"
              >
                上传铃声
              </button>
              <input
                id="notification-sound-upload-input"
                type="file"
                accept="audio/*"
                class="hidden-file-input"
              />
            </div>
          </div>

          <div class="settings-group">
            <div class="settings-group-title">输入</div>
            <div class="send-key-control">
              <span class="send-key-label">发送快捷键</span>
              <select
                id="send-key-mode-select"
                class="send-key-select"
                aria-label="发送快捷键"
                title="选择发送消息的快捷键"
              >
                <option value="enter">Enter</option>
                <option value="mod+enter">⌘+Enter (Mac) / Ctrl+Enter (Win)</option>
              </select>
            </div>
            <label class="history-continuation-control">
              <input id="history-continuation-enabled" type="checkbox" />
              <span>历史会话继续时注入最近上下文</span>
            </label>
          </div>

          <div class="settings-group">
            <div class="settings-group-title">外观</div>
            <button id="theme-toggle-btn" class="btn-secondary settings-theme-btn" title="跟随系统" aria-label="切换主题">主题：◑</button>
          </div>

          <div class="settings-group">
            <div class="settings-group-title">能力</div>
            <button
              id="open-capability-center-from-settings-btn"
              class="btn-secondary settings-capability-link-btn"
              type="button"
            >
              前往能力中心
            </button>
          </div>
        </div>
        <div class="modal-footer">
          <button id="close-settings-footer-btn" class="btn-primary">完成</button>
        </div>
      </div>
    </div>

    <!-- 能力中心弹窗 -->
    <div
      id="capability-center-modal"
      class="modal hidden"
      role="dialog"
      aria-modal="true"
      aria-labelledby="capability-center-modal-title"
    >
      <div class="modal-content capability-center-modal-content">
        <div class="modal-header">
          <h3 id="capability-center-modal-title">能力中心</h3>
          <button id="close-capability-center-modal" class="btn-icon" aria-label="关闭能力中心">×</button>
        </div>
        <div class="modal-body capability-center-modal-body">
          <p class="capability-center-summary">当前阶段仅管理建议列表显示，不会修改 CLI 实际加载配置。</p>
          <div class="capability-center-tabs" role="tablist" aria-label="能力中心标签">
            <button
              id="capability-tab-mcp"
              class="capability-tab active"
              type="button"
              role="tab"
              aria-selected="true"
              aria-controls="capability-panel-mcp"
            >
              MCP
            </button>
            <button
              id="capability-tab-skill"
              class="capability-tab"
              type="button"
              role="tab"
              aria-selected="false"
              aria-controls="capability-panel-skill"
            >
              SKILL
            </button>
          </div>
          <div class="capability-search-row">
            <input
              type="text"
              id="capability-search-input"
              class="capability-search-input"
              placeholder="搜索..."
              aria-label="搜索能力列表"
            />
          </div>
          <section id="capability-panel-mcp" class="capability-panel" role="tabpanel" aria-labelledby="capability-tab-mcp">
            <div id="capability-mcp-agent-label" class="capability-agent-label">-</div>
            <div id="capability-mcp-note" class="capability-note">-</div>
            <div id="capability-mcp-list" class="capability-list"></div>
          </section>
          <section
            id="capability-panel-skill"
            class="capability-panel hidden"
            role="tabpanel"
            aria-labelledby="capability-tab-skill"
          >
            <div id="capability-skill-agent-label" class="capability-agent-label">-</div>
            <div id="capability-skill-note" class="capability-note">-</div>
            <div id="capability-skill-list" class="capability-list"></div>
          </section>
        </div>
        <div class="modal-footer">
          <button id="close-capability-center-footer-btn" class="btn-primary">完成</button>
        </div>
      </div>
    </div>

    <!-- HTML Artifact 预览弹窗 -->
    <div id="artifact-preview-modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="artifact-preview-modal-title">
      <div class="modal-content artifact-preview-modal-content">
        <div class="modal-header">
          <h3 id="artifact-preview-modal-title">HTML 预览</h3>
          <button id="close-artifact-preview" class="btn-icon" aria-label="关闭预览">×</button>
        </div>
        <div class="modal-body artifact-preview-meta">
          <div id="artifact-preview-path"></div>
        </div>
        <div class="artifact-preview-body">
          <iframe
            id="artifact-preview-frame"
            class="artifact-preview-frame"
            sandbox="allow-scripts allow-same-origin"
            title="HTML 预览内容"
          ></iframe>
        </div>
      </div>
    </div>

    <!-- Git Diff 预览弹窗 -->
    <div id="git-diff-modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="git-diff-modal-title">
      <div class="modal-content git-diff-modal-content">
        <div class="modal-header">
          <h3 id="git-diff-modal-title" class="git-diff-title">文件 <span id="git-diff-path"></span> Diff</h3>
          <button id="close-git-diff" class="btn-icon" aria-label="关闭 Diff 预览">×</button>
        </div>
        <div class="git-diff-body">
          <pre id="git-diff-content" class="git-diff-content" role="region" aria-label="文件 Diff 内容"></pre>
        </div>
      </div>
    </div>

    <!-- 确认弹窗 -->
    <div id="confirm-modal" class="modal hidden" role="dialog" aria-modal="true" aria-labelledby="confirm-modal-title">
      <div class="modal-content confirm-modal-content">
        <div class="modal-header">
          <h3 id="confirm-modal-title">确认操作</h3>
          <button id="close-confirm-modal" class="btn-icon" aria-label="关闭确认弹窗">×</button>
        </div>
        <div class="modal-body">
          <p id="confirm-message"></p>
        </div>
        <div class="modal-footer">
          <button id="confirm-cancel" class="btn-secondary">取消</button>
          <button id="confirm-ok" class="btn-primary">确认</button>
        </div>
      </div>
    </div>

    <script type="module" src="/src/main.ts"></script>
  </body>
</html>