claudeck 1.2.0 → 1.3.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/README.md +64 -5
- package/cli.js +53 -4
- package/package.json +3 -2
- package/public/css/core/responsive.css +2 -2
- package/public/css/ui/file-picker.css +243 -17
- package/public/css/ui/messages.css +72 -9
- package/public/css/ui/toolbox.css +43 -0
- package/public/index.html +80 -745
- package/public/js/components/add-project-modal.js +27 -0
- package/public/js/components/agent-modal.js +73 -0
- package/public/js/components/agent-monitor-modal.js +19 -0
- package/public/js/components/bg-confirm-modal.js +22 -0
- package/public/js/components/chain-modal.js +52 -0
- package/public/js/components/cost-dashboard-modal.js +39 -0
- package/public/js/components/dag-editor-modal.js +55 -0
- package/public/js/components/file-picker-modal.js +45 -0
- package/public/js/components/linear-create-modal.js +43 -0
- package/public/js/components/mcp-modal.js +58 -0
- package/public/js/components/orchestrate-modal.js +40 -0
- package/public/js/components/permission-modal.js +30 -0
- package/public/js/components/prompt-modal.js +31 -0
- package/public/js/components/shortcuts-modal.js +45 -0
- package/public/js/components/status-bar.js +97 -0
- package/public/js/components/system-prompt-modal.js +29 -0
- package/public/js/components/telegram-modal.js +84 -0
- package/public/js/components/welcome-overlay.js +60 -0
- package/public/js/components/workflow-modal.js +41 -0
- package/public/js/core/api.js +10 -0
- package/public/js/core/dom.js +3 -2
- package/public/js/core/ws.js +7 -1
- package/public/js/features/attachments.js +226 -23
- package/public/js/features/projects.js +7 -0
- package/public/js/main.js +22 -0
- package/public/js/ui/shortcuts.js +4 -8
- package/public/login.html +470 -0
- package/public/offline.html +300 -168
- package/public/sw.js +10 -2
- package/server/auth.js +141 -0
- package/server.js +14 -3
package/public/index.html
CHANGED
|
@@ -19,61 +19,7 @@
|
|
|
19
19
|
<script src="https://cdn.jsdelivr.net/npm/driver.js@1.3.6/dist/driver.js.iife.js"></script>
|
|
20
20
|
</head>
|
|
21
21
|
<body>
|
|
22
|
-
|
|
23
|
-
<div id="welcome-overlay" class="welcome-overlay hidden">
|
|
24
|
-
<div class="welcome-container">
|
|
25
|
-
<div class="welcome-mascot">
|
|
26
|
-
<img src="/icons/whaly.png" alt="Whaly" class="welcome-whaly" draggable="false">
|
|
27
|
-
</div>
|
|
28
|
-
<h1 class="welcome-title">Welcome to <span>Claudeck</span></h1>
|
|
29
|
-
<div class="welcome-version">v1.0 · browser-based AI development environment</div>
|
|
30
|
-
<p class="welcome-description">
|
|
31
|
-
Your local command center for Claude Code. Chat with AI, run workflows,
|
|
32
|
-
manage projects, explore files, and orchestrate autonomous agents —
|
|
33
|
-
all from a single interface.
|
|
34
|
-
</p>
|
|
35
|
-
<div class="welcome-features">
|
|
36
|
-
<div class="welcome-feature">
|
|
37
|
-
<div class="welcome-feature-icon">
|
|
38
|
-
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
39
|
-
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
|
40
|
-
</svg>
|
|
41
|
-
</div>
|
|
42
|
-
<div>
|
|
43
|
-
<div class="welcome-feature-title">AI Chat</div>
|
|
44
|
-
<div class="welcome-feature-desc">Stream conversations with Claude, run slash commands, attach files</div>
|
|
45
|
-
</div>
|
|
46
|
-
</div>
|
|
47
|
-
<div class="welcome-feature">
|
|
48
|
-
<div class="welcome-feature-icon">
|
|
49
|
-
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
50
|
-
<circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/>
|
|
51
|
-
</svg>
|
|
52
|
-
</div>
|
|
53
|
-
<div>
|
|
54
|
-
<div class="welcome-feature-title">Agents & Workflows</div>
|
|
55
|
-
<div class="welcome-feature-desc">Automate tasks with pre-built or custom agent pipelines</div>
|
|
56
|
-
</div>
|
|
57
|
-
</div>
|
|
58
|
-
<div class="welcome-feature">
|
|
59
|
-
<div class="welcome-feature-icon">
|
|
60
|
-
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
61
|
-
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
|
62
|
-
</svg>
|
|
63
|
-
</div>
|
|
64
|
-
<div>
|
|
65
|
-
<div class="welcome-feature-title">Dev Tools</div>
|
|
66
|
-
<div class="welcome-feature-desc">File explorer, Git panel, MCP servers, cost analytics</div>
|
|
67
|
-
</div>
|
|
68
|
-
</div>
|
|
69
|
-
</div>
|
|
70
|
-
<div class="welcome-actions">
|
|
71
|
-
<button id="welcome-get-started" class="welcome-btn-primary">Get Started</button>
|
|
72
|
-
<button id="welcome-take-tour" class="welcome-btn-secondary">Take a Tour</button>
|
|
73
|
-
</div>
|
|
74
|
-
<div class="welcome-hint">Press <kbd>Enter</kbd> or <kbd>Esc</kbd> to skip</div>
|
|
75
|
-
</div>
|
|
76
|
-
</div>
|
|
22
|
+
<claudeck-welcome-overlay></claudeck-welcome-overlay>
|
|
77
23
|
|
|
78
24
|
<header class="top-header">
|
|
79
25
|
<button id="sidebar-toggle-btn" aria-label="Toggle sidebar">
|
|
@@ -373,68 +319,72 @@
|
|
|
373
319
|
<span class="input-waiting-text">Claude is waiting for your response</span>
|
|
374
320
|
</div>
|
|
375
321
|
<div class="input-bar">
|
|
376
|
-
<button id="agent-btn" data-tooltip="Agents & Workflows" class="toolbox-toggle">
|
|
377
|
-
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
378
|
-
<rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="9" cy="16" r="1"/><circle cx="15" cy="16" r="1"/><path d="M12 2v4"/><path d="M8 7h8a2 2 0 0 1 2 2v2H6V9a2 2 0 0 1 2-2z"/><path d="M5 11h1"/><path d="M18 11h1"/>
|
|
379
|
-
</svg>
|
|
380
|
-
</button>
|
|
381
|
-
<button id="attach-btn" data-tooltip="Attach Files" class="toolbox-toggle" style="position:relative;">
|
|
382
|
-
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
383
|
-
<path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
|
|
384
|
-
</svg>
|
|
385
|
-
<span id="attach-badge" class="attach-badge hidden">0</span>
|
|
386
|
-
</button>
|
|
387
|
-
<button id="image-btn" data-tooltip="Attach Images" class="toolbox-toggle">
|
|
388
|
-
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
389
|
-
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
|
|
390
|
-
<circle cx="8.5" cy="8.5" r="1.5"/>
|
|
391
|
-
<polyline points="21 15 16 10 5 21"/>
|
|
392
|
-
</svg>
|
|
393
|
-
</button>
|
|
394
|
-
<button id="mic-btn" data-tooltip="Voice Input" class="toolbox-toggle">
|
|
395
|
-
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
396
|
-
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
|
|
397
|
-
<path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
|
|
398
|
-
<line x1="12" y1="19" x2="12" y2="23"/>
|
|
399
|
-
<line x1="8" y1="23" x2="16" y2="23"/>
|
|
400
|
-
</svg>
|
|
401
|
-
</button>
|
|
402
|
-
<button id="worktree-btn" data-tooltip="Worktree Mode" class="toolbox-toggle">
|
|
403
|
-
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
404
|
-
<line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/>
|
|
405
|
-
</svg>
|
|
406
|
-
</button>
|
|
407
|
-
<button id="toolbox-btn" data-tooltip="Saved Prompts" class="toolbox-toggle">
|
|
408
|
-
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
409
|
-
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 7V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v3"/><line x1="12" y1="12" x2="12" y2="16"/><line x1="10" y1="14" x2="14" y2="14"/>
|
|
410
|
-
</svg>
|
|
411
|
-
</button>
|
|
412
322
|
<div class="input-textarea-wrap">
|
|
413
323
|
<textarea id="message-input" placeholder="> type a message or / for commands..." rows="1"></textarea>
|
|
414
|
-
<div class="input-
|
|
415
|
-
<
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
<
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
324
|
+
<div class="input-toolbar">
|
|
325
|
+
<div class="toolbox-strip">
|
|
326
|
+
<button id="attach-btn" data-tooltip="Files" class="toolbox-toggle">
|
|
327
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
328
|
+
<path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/>
|
|
329
|
+
</svg>
|
|
330
|
+
<span id="attach-badge" class="attach-badge hidden">0</span>
|
|
331
|
+
</button>
|
|
332
|
+
<button id="image-btn" data-tooltip="Images" class="toolbox-toggle">
|
|
333
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
334
|
+
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
|
|
335
|
+
<circle cx="8.5" cy="8.5" r="1.5"/>
|
|
336
|
+
<polyline points="21 15 16 10 5 21"/>
|
|
337
|
+
</svg>
|
|
338
|
+
</button>
|
|
339
|
+
<button id="agent-btn" data-tooltip="Agents" class="toolbox-toggle">
|
|
340
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
341
|
+
<rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="9" cy="16" r="1"/><circle cx="15" cy="16" r="1"/><path d="M12 2v4"/><path d="M8 7h8a2 2 0 0 1 2 2v2H6V9a2 2 0 0 1 2-2z"/><path d="M5 11h1"/><path d="M18 11h1"/>
|
|
342
|
+
</svg>
|
|
343
|
+
</button>
|
|
344
|
+
<button id="mic-btn" data-tooltip="Voice" class="toolbox-toggle">
|
|
345
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
346
|
+
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
|
|
347
|
+
<path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
|
|
348
|
+
<line x1="12" y1="19" x2="12" y2="23"/>
|
|
349
|
+
<line x1="8" y1="23" x2="16" y2="23"/>
|
|
350
|
+
</svg>
|
|
351
|
+
</button>
|
|
352
|
+
<button id="worktree-btn" data-tooltip="Worktree" class="toolbox-toggle">
|
|
353
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
354
|
+
<line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/>
|
|
355
|
+
</svg>
|
|
356
|
+
</button>
|
|
357
|
+
<button id="toolbox-btn" data-tooltip="Prompts" class="toolbox-toggle">
|
|
358
|
+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
359
|
+
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 7V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v3"/><line x1="12" y1="12" x2="12" y2="16"/><line x1="10" y1="14" x2="14" y2="14"/>
|
|
360
|
+
</svg>
|
|
361
|
+
</button>
|
|
362
|
+
</div>
|
|
363
|
+
<div class="input-meta">
|
|
364
|
+
<span class="input-meta-item" id="input-meta-model" title="Selected model"></span>
|
|
365
|
+
<span class="input-meta-sep">·</span>
|
|
366
|
+
<span class="input-meta-item" id="input-meta-perm" title="Permission mode"></span>
|
|
367
|
+
<span class="input-meta-sep">·</span>
|
|
368
|
+
<span class="input-meta-item" id="input-meta-turns" title="Max turns per query"></span>
|
|
369
|
+
<span class="input-meta-sep">·</span>
|
|
370
|
+
<span class="input-meta-shortcuts">
|
|
371
|
+
<span class="input-meta-kbd" title="Toggle right panel">⌘B</span>
|
|
372
|
+
<span class="input-meta-kbd" title="New session">⌘N</span>
|
|
373
|
+
<span class="input-meta-kbd" title="Search sessions">⌘K</span>
|
|
374
|
+
<span class="input-meta-kbd" title="Show all shortcuts">⌘/</span>
|
|
375
|
+
</span>
|
|
376
|
+
</div>
|
|
427
377
|
</div>
|
|
428
378
|
</div>
|
|
429
379
|
<div class="send-history-group">
|
|
430
|
-
<button id="send-btn" title="Send">
|
|
431
|
-
<svg width="
|
|
432
|
-
<path d="
|
|
380
|
+
<button id="send-btn" title="Send (Enter)">
|
|
381
|
+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none">
|
|
382
|
+
<path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
|
433
383
|
</svg>
|
|
434
384
|
</button>
|
|
435
385
|
<button id="stop-btn" title="Stop" class="hidden">
|
|
436
|
-
<svg width="
|
|
437
|
-
<rect x="4" y="4" width="
|
|
386
|
+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none">
|
|
387
|
+
<rect x="4" y="4" width="16" height="16" rx="3" fill="currentColor"/>
|
|
438
388
|
</svg>
|
|
439
389
|
</button>
|
|
440
390
|
<button id="history-btn" class="hidden" data-tooltip="Message History" title="Message history" aria-label="Message history">
|
|
@@ -551,644 +501,29 @@
|
|
|
551
501
|
</aside>
|
|
552
502
|
</div>
|
|
553
503
|
|
|
554
|
-
<!-- Orchestrate Modal -->
|
|
555
|
-
<div id="orch-modal" class="modal-overlay hidden">
|
|
556
|
-
<div class="modal agent-form-modal">
|
|
557
|
-
<div class="modal-header">
|
|
558
|
-
<h3>Orchestrate</h3>
|
|
559
|
-
<button id="orch-modal-close" class="modal-close">×</button>
|
|
560
|
-
</div>
|
|
561
|
-
<div class="af-section">
|
|
562
|
-
<div class="af-section-label">How it works</div>
|
|
563
|
-
<div class="orch-explainer">
|
|
564
|
-
<div class="orch-explainer-steps">
|
|
565
|
-
<div class="orch-step"><span class="orch-step-num">1</span><span>Describe your task in plain language</span></div>
|
|
566
|
-
<div class="orch-step"><span class="orch-step-num">2</span><span>The orchestrator analyzes and decomposes it into sub-tasks</span></div>
|
|
567
|
-
<div class="orch-step"><span class="orch-step-num">3</span><span>Each sub-task is delegated to the best-fit agent automatically</span></div>
|
|
568
|
-
<div class="orch-step"><span class="orch-step-num">4</span><span>Results are synthesized into a unified response</span></div>
|
|
569
|
-
</div>
|
|
570
|
-
</div>
|
|
571
|
-
</div>
|
|
572
|
-
<div class="af-section">
|
|
573
|
-
<div class="af-section-label">Task</div>
|
|
574
|
-
<div class="af-field">
|
|
575
|
-
<label for="orch-task-input">What do you need done?</label>
|
|
576
|
-
<textarea id="orch-task-input" rows="5" placeholder="e.g. Review the current changes for bugs and security issues, then write tests for any uncovered code paths, and finally refactor any code smells you find."></textarea>
|
|
577
|
-
</div>
|
|
578
|
-
</div>
|
|
579
|
-
<div class="modal-actions">
|
|
580
|
-
<button type="button" id="orch-modal-cancel" class="modal-btn-cancel">Cancel</button>
|
|
581
|
-
<button type="button" id="orch-modal-run" class="modal-btn-save">Run Orchestrator</button>
|
|
582
|
-
</div>
|
|
583
|
-
</div>
|
|
584
|
-
</div>
|
|
585
|
-
|
|
586
|
-
<!-- Agent Monitor Modal -->
|
|
587
|
-
<div id="agent-monitor-modal" class="modal-overlay hidden">
|
|
588
|
-
<div class="modal agent-monitor-modal">
|
|
589
|
-
<div class="modal-header">
|
|
590
|
-
<h3>Agent Monitor</h3>
|
|
591
|
-
<button id="agent-monitor-close" class="modal-close">×</button>
|
|
592
|
-
</div>
|
|
593
|
-
<div id="agent-monitor-content"></div>
|
|
594
|
-
</div>
|
|
595
|
-
</div>
|
|
596
|
-
|
|
597
|
-
<!-- DAG Editor Modal -->
|
|
598
|
-
<div id="dag-modal" class="modal-overlay hidden">
|
|
599
|
-
<div class="modal dag-modal-wide">
|
|
600
|
-
<div class="modal-header">
|
|
601
|
-
<h3 id="dag-modal-title">New DAG</h3>
|
|
602
|
-
<button id="dag-modal-close" class="modal-close">×</button>
|
|
603
|
-
</div>
|
|
604
|
-
<div class="dag-explainer af-section">
|
|
605
|
-
<div class="af-section-label">What is a DAG?</div>
|
|
606
|
-
<div class="orch-explainer">
|
|
607
|
-
<p class="dag-explainer-text">A <strong>DAG</strong> (Directed Acyclic Graph) lets you run agents in parallel when they have no dependencies, and sequentially when one depends on another's output.</p>
|
|
608
|
-
<div class="orch-explainer-steps">
|
|
609
|
-
<div class="orch-step"><span class="orch-step-num">1</span><span><strong>Drag agents</strong> from the palette onto the canvas</span></div>
|
|
610
|
-
<div class="orch-step"><span class="orch-step-num">2</span><span><strong>Connect outputs → inputs</strong> by dragging between ports to define dependencies</span></div>
|
|
611
|
-
<div class="orch-step"><span class="orch-step-num">3</span><span><strong>Click an edge</strong> to remove a connection</span></div>
|
|
612
|
-
<div class="orch-step"><span class="orch-step-num">4</span><span>Agents on the same level <strong>run in parallel</strong>, dependent agents wait</span></div>
|
|
613
|
-
</div>
|
|
614
|
-
</div>
|
|
615
|
-
</div>
|
|
616
|
-
<div class="dag-editor-toolbar af-section">
|
|
617
|
-
<div class="af-section-label">Details</div>
|
|
618
|
-
<div class="af-grid-2">
|
|
619
|
-
<div class="af-field">
|
|
620
|
-
<label for="dag-form-title">Title</label>
|
|
621
|
-
<input id="dag-form-title" type="text" placeholder="e.g. Full Review Pipeline" required>
|
|
622
|
-
</div>
|
|
623
|
-
<div class="af-field">
|
|
624
|
-
<label for="dag-form-desc">Description</label>
|
|
625
|
-
<input id="dag-form-desc" type="text" placeholder="Short description">
|
|
626
|
-
</div>
|
|
627
|
-
</div>
|
|
628
|
-
</div>
|
|
629
|
-
<div class="dag-editor-body">
|
|
630
|
-
<div class="dag-node-palette" id="dag-node-palette"></div>
|
|
631
|
-
<div class="dag-canvas-wrap">
|
|
632
|
-
<svg id="dag-canvas" class="dag-canvas"></svg>
|
|
633
|
-
</div>
|
|
634
|
-
</div>
|
|
635
|
-
<input id="dag-form-edit-id" type="hidden">
|
|
636
|
-
<div class="modal-actions">
|
|
637
|
-
<button type="button" id="dag-modal-cancel" class="modal-btn-cancel">Cancel</button>
|
|
638
|
-
<button type="button" id="dag-auto-layout" class="modal-btn-cancel">Auto Layout</button>
|
|
639
|
-
<button type="button" id="dag-modal-save" class="modal-btn-save">Save DAG</button>
|
|
640
|
-
</div>
|
|
641
|
-
</div>
|
|
642
|
-
</div>
|
|
643
|
-
|
|
644
|
-
<!-- Agent Chain Modal -->
|
|
645
|
-
<div id="chain-modal" class="modal-overlay hidden">
|
|
646
|
-
<div class="modal agent-form-modal">
|
|
647
|
-
<div class="modal-header">
|
|
648
|
-
<h3 id="chain-modal-title">New Chain</h3>
|
|
649
|
-
<button id="chain-modal-close" class="modal-close">×</button>
|
|
650
|
-
</div>
|
|
651
|
-
<form id="chain-form">
|
|
652
|
-
<div class="af-section">
|
|
653
|
-
<div class="af-section-label">Details</div>
|
|
654
|
-
<div class="af-field">
|
|
655
|
-
<label for="chain-form-title">Title</label>
|
|
656
|
-
<input id="chain-form-title" type="text" placeholder="e.g. Full Code Review Pipeline" required>
|
|
657
|
-
</div>
|
|
658
|
-
<div class="af-field">
|
|
659
|
-
<label for="chain-form-desc">Description</label>
|
|
660
|
-
<input id="chain-form-desc" type="text" placeholder="Short description of the chain">
|
|
661
|
-
</div>
|
|
662
|
-
</div>
|
|
663
|
-
<div class="af-section">
|
|
664
|
-
<div class="af-section-label">Pipeline</div>
|
|
665
|
-
<div id="chain-agent-list" class="chain-agent-list"></div>
|
|
666
|
-
<button type="button" id="chain-add-agent-btn" class="chain-add-agent-btn">+ Add Agent Step</button>
|
|
667
|
-
</div>
|
|
668
|
-
<div class="af-section">
|
|
669
|
-
<div class="af-section-label">Settings</div>
|
|
670
|
-
<div class="af-field">
|
|
671
|
-
<label for="chain-form-context">Context Passing</label>
|
|
672
|
-
<select id="chain-form-context">
|
|
673
|
-
<option value="summary">Summary (recommended)</option>
|
|
674
|
-
<option value="full">Full output</option>
|
|
675
|
-
<option value="none">None</option>
|
|
676
|
-
</select>
|
|
677
|
-
</div>
|
|
678
|
-
</div>
|
|
679
|
-
<input id="chain-form-edit-id" type="hidden">
|
|
680
|
-
<div class="modal-actions">
|
|
681
|
-
<button type="button" id="chain-modal-cancel" class="modal-btn-cancel">Cancel</button>
|
|
682
|
-
<button type="submit" class="modal-btn-save">Save Chain</button>
|
|
683
|
-
</div>
|
|
684
|
-
</form>
|
|
685
|
-
</div>
|
|
686
|
-
</div>
|
|
687
|
-
|
|
688
|
-
<!-- Agent CRUD Modal -->
|
|
689
|
-
<div id="agent-modal" class="modal-overlay hidden">
|
|
690
|
-
<div class="modal agent-form-modal">
|
|
691
|
-
<div class="modal-header">
|
|
692
|
-
<h3 id="agent-modal-title">New Agent</h3>
|
|
693
|
-
<button id="agent-modal-close" class="modal-close">×</button>
|
|
694
|
-
</div>
|
|
695
|
-
<form id="agent-form">
|
|
696
|
-
<div class="af-section">
|
|
697
|
-
<div class="af-section-label">Identity</div>
|
|
698
|
-
<div class="af-grid-2">
|
|
699
|
-
<div class="af-field">
|
|
700
|
-
<label for="agent-form-title">Title</label>
|
|
701
|
-
<input id="agent-form-title" type="text" placeholder="e.g. Code Documenter" required>
|
|
702
|
-
</div>
|
|
703
|
-
<div class="af-field">
|
|
704
|
-
<label for="agent-form-icon">Icon</label>
|
|
705
|
-
<select id="agent-form-icon">
|
|
706
|
-
<option value="search">Search</option>
|
|
707
|
-
<option value="bug">Bug</option>
|
|
708
|
-
<option value="check">Check</option>
|
|
709
|
-
<option value="tool" selected>Tool</option>
|
|
710
|
-
</select>
|
|
711
|
-
</div>
|
|
712
|
-
</div>
|
|
713
|
-
<div class="af-field">
|
|
714
|
-
<label for="agent-form-desc">Description</label>
|
|
715
|
-
<input id="agent-form-desc" type="text" placeholder="Short description of what this agent does" required>
|
|
716
|
-
</div>
|
|
717
|
-
</div>
|
|
718
|
-
<div class="af-section">
|
|
719
|
-
<div class="af-section-label">Behavior</div>
|
|
720
|
-
<div class="af-field">
|
|
721
|
-
<label for="agent-form-goal">Goal</label>
|
|
722
|
-
<textarea id="agent-form-goal" rows="4" placeholder="Describe the agent's goal in detail. Be specific about what files to look at, what to check, and what output to produce..." required></textarea>
|
|
723
|
-
</div>
|
|
724
|
-
</div>
|
|
725
|
-
<div class="af-section">
|
|
726
|
-
<div class="af-section-label">Constraints</div>
|
|
727
|
-
<div class="af-grid-2">
|
|
728
|
-
<div class="af-field">
|
|
729
|
-
<label for="agent-form-max-turns">Max Turns</label>
|
|
730
|
-
<div class="af-input-with-hint">
|
|
731
|
-
<input id="agent-form-max-turns" type="number" min="1" max="200" value="50">
|
|
732
|
-
<span class="af-hint">1 - 200</span>
|
|
733
|
-
</div>
|
|
734
|
-
</div>
|
|
735
|
-
<div class="af-field">
|
|
736
|
-
<label for="agent-form-timeout">Timeout (seconds)</label>
|
|
737
|
-
<div class="af-input-with-hint">
|
|
738
|
-
<input id="agent-form-timeout" type="number" min="30" max="3600" value="300">
|
|
739
|
-
<span class="af-hint">30 - 3600</span>
|
|
740
|
-
</div>
|
|
741
|
-
</div>
|
|
742
|
-
</div>
|
|
743
|
-
</div>
|
|
744
|
-
<input id="agent-form-edit-id" type="hidden">
|
|
745
|
-
<div class="modal-actions">
|
|
746
|
-
<button type="button" id="agent-modal-cancel" class="modal-btn-cancel">Cancel</button>
|
|
747
|
-
<button type="submit" class="modal-btn-save">Save Agent</button>
|
|
748
|
-
</div>
|
|
749
|
-
</form>
|
|
750
|
-
</div>
|
|
751
|
-
</div>
|
|
752
504
|
|
|
753
|
-
<!--
|
|
754
|
-
<
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
<div id="wf-steps-list" class="wf-steps-list"></div>
|
|
775
|
-
<button type="button" id="wf-add-step-btn" class="wf-step-add">+ Add Step</button>
|
|
776
|
-
</div>
|
|
777
|
-
<input id="wf-form-edit-id" type="hidden">
|
|
778
|
-
<div class="modal-actions">
|
|
779
|
-
<button type="button" id="wf-modal-cancel" class="modal-btn-cancel">Cancel</button>
|
|
780
|
-
<button type="submit" class="modal-btn-save">Save Workflow</button>
|
|
781
|
-
</div>
|
|
782
|
-
</form>
|
|
783
|
-
</div>
|
|
784
|
-
</div>
|
|
505
|
+
<!-- Modals (Web Components) -->
|
|
506
|
+
<claudeck-orchestrate-modal></claudeck-orchestrate-modal>
|
|
507
|
+
<claudeck-agent-monitor-modal></claudeck-agent-monitor-modal>
|
|
508
|
+
<claudeck-dag-editor></claudeck-dag-editor>
|
|
509
|
+
<claudeck-chain-modal></claudeck-chain-modal>
|
|
510
|
+
<claudeck-agent-modal></claudeck-agent-modal>
|
|
511
|
+
<claudeck-workflow-modal></claudeck-workflow-modal>
|
|
512
|
+
<claudeck-prompt-modal></claudeck-prompt-modal>
|
|
513
|
+
<claudeck-system-prompt-modal></claudeck-system-prompt-modal>
|
|
514
|
+
<claudeck-file-picker></claudeck-file-picker>
|
|
515
|
+
<claudeck-shortcuts-modal></claudeck-shortcuts-modal>
|
|
516
|
+
<claudeck-cost-dashboard></claudeck-cost-dashboard>
|
|
517
|
+
<claudeck-bg-confirm></claudeck-bg-confirm>
|
|
518
|
+
<claudeck-permission-modal></claudeck-permission-modal>
|
|
519
|
+
<claudeck-linear-create></claudeck-linear-create>
|
|
520
|
+
<claudeck-telegram-modal></claudeck-telegram-modal>
|
|
521
|
+
<claudeck-mcp-modal></claudeck-mcp-modal>
|
|
522
|
+
<claudeck-add-project></claudeck-add-project>
|
|
523
|
+
|
|
524
|
+
<!-- Status Bar (Web Component) -->
|
|
525
|
+
<claudeck-status-bar></claudeck-status-bar>
|
|
785
526
|
|
|
786
|
-
<!-- Add Prompt Modal -->
|
|
787
|
-
<div id="prompt-modal" class="modal-overlay hidden">
|
|
788
|
-
<div class="modal">
|
|
789
|
-
<div class="modal-header">
|
|
790
|
-
<h3>New Prompt</h3>
|
|
791
|
-
<button id="modal-close" class="modal-close">×</button>
|
|
792
|
-
</div>
|
|
793
|
-
<form id="prompt-form">
|
|
794
|
-
<label for="prompt-title">Title</label>
|
|
795
|
-
<input id="prompt-title" type="text" placeholder="e.g. Optimize Imports" required>
|
|
796
|
-
<label for="prompt-desc">Description</label>
|
|
797
|
-
<input id="prompt-desc" type="text" placeholder="Short description of what it does" required>
|
|
798
|
-
<label for="prompt-text">Prompt</label>
|
|
799
|
-
<textarea id="prompt-text" rows="4" placeholder="The full prompt to send to Claude..." required></textarea>
|
|
800
|
-
<div class="modal-actions">
|
|
801
|
-
<button type="button" id="modal-cancel" class="modal-btn-cancel">Cancel</button>
|
|
802
|
-
<button type="submit" class="modal-btn-save">Save Prompt</button>
|
|
803
|
-
</div>
|
|
804
|
-
</form>
|
|
805
|
-
</div>
|
|
806
|
-
</div>
|
|
807
|
-
|
|
808
|
-
<!-- System Prompt Modal -->
|
|
809
|
-
<div id="system-prompt-modal" class="modal-overlay hidden">
|
|
810
|
-
<div class="modal">
|
|
811
|
-
<div class="modal-header">
|
|
812
|
-
<h3>System Prompt</h3>
|
|
813
|
-
<button id="sp-modal-close" class="modal-close">×</button>
|
|
814
|
-
</div>
|
|
815
|
-
<form id="system-prompt-form">
|
|
816
|
-
<label for="sp-textarea">Custom instructions for Claude in this project</label>
|
|
817
|
-
<p class="sp-hint">If a <code>CLAUDE.md</code> file exists in the project root, it is automatically included by the SDK — no need to duplicate it here.</p>
|
|
818
|
-
<textarea id="sp-textarea" rows="8" placeholder="e.g., You are an expert in React + TypeScript. This is a monorepo..."></textarea>
|
|
819
|
-
<div class="modal-actions">
|
|
820
|
-
<button type="button" id="sp-clear-btn" class="modal-btn-cancel">Clear</button>
|
|
821
|
-
<button type="button" id="sp-cancel-btn" class="modal-btn-cancel">Cancel</button>
|
|
822
|
-
<button type="submit" class="modal-btn-save">Save</button>
|
|
823
|
-
</div>
|
|
824
|
-
</form>
|
|
825
|
-
</div>
|
|
826
|
-
</div>
|
|
827
|
-
|
|
828
|
-
<!-- File Picker Modal -->
|
|
829
|
-
<div id="file-picker-modal" class="modal-overlay hidden">
|
|
830
|
-
<div class="modal file-picker-modal">
|
|
831
|
-
<div class="modal-header">
|
|
832
|
-
<h3>Attach Files</h3>
|
|
833
|
-
<button id="fp-modal-close" class="modal-close">×</button>
|
|
834
|
-
</div>
|
|
835
|
-
<input id="fp-search" type="text" class="file-picker-search" placeholder="Search files..." autocomplete="off">
|
|
836
|
-
<div id="fp-list" class="file-picker-list"></div>
|
|
837
|
-
<div class="file-picker-footer">
|
|
838
|
-
<span id="fp-count">0 files selected</span>
|
|
839
|
-
<button id="fp-done-btn" class="modal-btn-save">Done</button>
|
|
840
|
-
</div>
|
|
841
|
-
</div>
|
|
842
|
-
</div>
|
|
843
|
-
|
|
844
|
-
<!-- Keyboard Shortcuts Modal -->
|
|
845
|
-
<div id="shortcuts-modal" class="modal-overlay hidden">
|
|
846
|
-
<div class="modal">
|
|
847
|
-
<div class="modal-header">
|
|
848
|
-
<h3>Keyboard Shortcuts</h3>
|
|
849
|
-
<button id="shortcuts-modal-close" class="modal-close">×</button>
|
|
850
|
-
</div>
|
|
851
|
-
<table class="shortcuts-table">
|
|
852
|
-
<tr><td><span class="kbd">⌘K</span></td><td>Focus session search</td></tr>
|
|
853
|
-
<tr><td><span class="kbd">⌘N</span></td><td>New session</td></tr>
|
|
854
|
-
<tr><td><span class="kbd">⌘/</span></td><td>Show keyboard shortcuts</td></tr>
|
|
855
|
-
<tr><td><span class="kbd">⌘B</span></td><td>Toggle right panel</td></tr>
|
|
856
|
-
<tr><td><span class="kbd">⌘⇧E</span></td><td>Open file explorer</td></tr>
|
|
857
|
-
<tr><td><span class="kbd">⌘⇧G</span></td><td>Open git panel</td></tr>
|
|
858
|
-
<tr><td><span class="kbd">⌘⇧R</span></td><td>Open repos panel</td></tr>
|
|
859
|
-
<tr><td><span class="kbd">⌘⇧V</span></td><td>Open events panel</td></tr>
|
|
860
|
-
<tr><td><span class="kbd">⌘⇧A</span></td><td>Go to home page</td></tr>
|
|
861
|
-
<tr><td><span class="kbd">⌘⇧T</span></td><td>Toggle tips feed</td></tr>
|
|
862
|
-
<tr><td><span class="kbd">⌘1</span>–<span class="kbd">⌘4</span></td><td>Focus parallel pane 1–4</td></tr>
|
|
863
|
-
<tr><td><span class="kbd">Esc</span></td><td>Close any open modal</td></tr>
|
|
864
|
-
<tr><td><span class="kbd">Enter</span></td><td>Send message</td></tr>
|
|
865
|
-
<tr><td><span class="kbd">Shift+Enter</span></td><td>New line in input</td></tr>
|
|
866
|
-
<tr><td><span class="kbd">/</span></td><td>Slash commands autocomplete</td></tr>
|
|
867
|
-
<tr><td><span class="kbd">↑</span></td><td>Recall previous message (empty input)</td></tr>
|
|
868
|
-
<tr><td><span class="kbd">↓</span></td><td>Recall next message (in history)</td></tr>
|
|
869
|
-
<tr><td><span class="kbd">Esc</span></td><td>Cancel history navigation</td></tr>
|
|
870
|
-
</table>
|
|
871
|
-
</div>
|
|
872
|
-
</div>
|
|
873
|
-
|
|
874
|
-
<!-- Cost Dashboard Modal -->
|
|
875
|
-
<div id="cost-dashboard-modal" class="modal-overlay hidden">
|
|
876
|
-
<div class="modal cost-dashboard-modal">
|
|
877
|
-
<div class="modal-header">
|
|
878
|
-
<h3>Cost Dashboard</h3>
|
|
879
|
-
<button id="cost-modal-close" class="modal-close">×</button>
|
|
880
|
-
</div>
|
|
881
|
-
<div id="cost-dashboard-content">
|
|
882
|
-
<div class="cost-summary-cards" id="cost-summary-cards"></div>
|
|
883
|
-
<div class="cost-table-container">
|
|
884
|
-
<table class="cost-table">
|
|
885
|
-
<thead>
|
|
886
|
-
<tr>
|
|
887
|
-
<th data-sort="title">Session</th>
|
|
888
|
-
<th data-sort="turns">Turns</th>
|
|
889
|
-
<th data-sort="tokens">Tokens</th>
|
|
890
|
-
<th data-sort="cost">Cost</th>
|
|
891
|
-
</tr>
|
|
892
|
-
</thead>
|
|
893
|
-
<tbody id="cost-table-body"></tbody>
|
|
894
|
-
</table>
|
|
895
|
-
</div>
|
|
896
|
-
<div class="cost-chart-section">
|
|
897
|
-
<h4>Daily Costs (Last 30 Days)</h4>
|
|
898
|
-
<div class="cost-chart" id="cost-chart"></div>
|
|
899
|
-
</div>
|
|
900
|
-
</div>
|
|
901
|
-
</div>
|
|
902
|
-
</div>
|
|
903
|
-
|
|
904
|
-
<!-- Background Session Confirmation Dialog -->
|
|
905
|
-
<div id="bg-confirm-modal" class="modal-overlay hidden" data-persistent>
|
|
906
|
-
<div class="modal bg-confirm-modal">
|
|
907
|
-
<div class="modal-header">
|
|
908
|
-
<h3>Session In Progress</h3>
|
|
909
|
-
</div>
|
|
910
|
-
<p class="bg-confirm-text">Claude is still responding in this session. What would you like to do?</p>
|
|
911
|
-
<div class="modal-actions bg-confirm-actions">
|
|
912
|
-
<button id="bg-confirm-cancel" class="modal-btn-cancel">Cancel</button>
|
|
913
|
-
<button id="bg-confirm-abort" class="modal-btn-cancel bg-confirm-abort-btn">Abort Session</button>
|
|
914
|
-
<button id="bg-confirm-background" class="modal-btn-save">Continue in Background</button>
|
|
915
|
-
</div>
|
|
916
|
-
</div>
|
|
917
|
-
</div>
|
|
918
|
-
|
|
919
|
-
<!-- Permission Approval Modal -->
|
|
920
|
-
<div id="perm-modal" class="modal-overlay hidden" data-persistent>
|
|
921
|
-
<div class="modal perm-modal">
|
|
922
|
-
<div class="modal-header perm-modal-header">
|
|
923
|
-
<h3><span class="perm-tool-icon">⚠</span> <span id="perm-modal-tool-name">Tool Approval</span></h3>
|
|
924
|
-
</div>
|
|
925
|
-
<span id="perm-bg-badge" class="perm-bg-badge hidden"></span>
|
|
926
|
-
<div id="perm-modal-summary" class="perm-modal-summary"></div>
|
|
927
|
-
<details class="perm-modal-details">
|
|
928
|
-
<summary>Full input</summary>
|
|
929
|
-
<pre id="perm-modal-input" class="perm-modal-input"></pre>
|
|
930
|
-
</details>
|
|
931
|
-
<label class="perm-always-allow">
|
|
932
|
-
<input type="checkbox" id="perm-always-allow-cb">
|
|
933
|
-
Always allow <strong id="perm-always-allow-tool"></strong> this session
|
|
934
|
-
</label>
|
|
935
|
-
<div class="modal-actions">
|
|
936
|
-
<button id="perm-deny-btn" class="perm-deny-btn">Deny</button>
|
|
937
|
-
<button id="perm-allow-btn" class="perm-allow-btn">Allow</button>
|
|
938
|
-
</div>
|
|
939
|
-
</div>
|
|
940
|
-
</div>
|
|
941
|
-
|
|
942
|
-
<!-- Linear Create Issue Modal -->
|
|
943
|
-
<div id="linear-create-modal" class="modal-overlay hidden">
|
|
944
|
-
<div class="modal">
|
|
945
|
-
<div class="modal-header">
|
|
946
|
-
<h3>Create Issue</h3>
|
|
947
|
-
<button id="linear-create-close" class="modal-close">×</button>
|
|
948
|
-
</div>
|
|
949
|
-
<form id="linear-create-form">
|
|
950
|
-
<label for="linear-create-title">Title</label>
|
|
951
|
-
<input id="linear-create-title" type="text" placeholder="Issue title" required>
|
|
952
|
-
<label for="linear-create-desc">Description</label>
|
|
953
|
-
<textarea id="linear-create-desc" rows="3" placeholder="Optional description..."></textarea>
|
|
954
|
-
<label for="linear-create-team">Project (Team)</label>
|
|
955
|
-
<select id="linear-create-team" required>
|
|
956
|
-
<option value="">Select a team...</option>
|
|
957
|
-
</select>
|
|
958
|
-
<label for="linear-create-state">State</label>
|
|
959
|
-
<select id="linear-create-state" disabled>
|
|
960
|
-
<option value="">Select a team first...</option>
|
|
961
|
-
</select>
|
|
962
|
-
<div class="modal-actions">
|
|
963
|
-
<button type="button" id="linear-create-cancel" class="modal-btn-cancel">Cancel</button>
|
|
964
|
-
<button type="submit" id="linear-create-submit" class="modal-btn-save">Create</button>
|
|
965
|
-
</div>
|
|
966
|
-
</form>
|
|
967
|
-
</div>
|
|
968
|
-
</div>
|
|
969
|
-
|
|
970
|
-
<!-- Telegram Settings Modal -->
|
|
971
|
-
<div id="telegram-modal" class="modal-overlay hidden">
|
|
972
|
-
<div class="modal telegram-modal">
|
|
973
|
-
<div class="modal-header">
|
|
974
|
-
<h2>
|
|
975
|
-
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
976
|
-
<path d="M21.2 4.6L2.4 11.2c-.8.3-.8 1.5 0 1.8l4.6 1.7 1.7 5.5c.2.6 1 .8 1.4.3l2.5-2.8 4.8 3.5c.6.4 1.4.1 1.5-.6L21.2 4.6z"/>
|
|
977
|
-
</svg>
|
|
978
|
-
Telegram Notifications
|
|
979
|
-
</h2>
|
|
980
|
-
<button class="modal-close" id="telegram-close">×</button>
|
|
981
|
-
</div>
|
|
982
|
-
<div class="modal-body" style="padding:16px;">
|
|
983
|
-
<div class="telegram-form">
|
|
984
|
-
<label class="telegram-toggle-row">
|
|
985
|
-
<input type="checkbox" id="telegram-enabled">
|
|
986
|
-
<span>Enable Telegram notifications</span>
|
|
987
|
-
</label>
|
|
988
|
-
<div class="telegram-field">
|
|
989
|
-
<label for="telegram-bot-token">Bot Token</label>
|
|
990
|
-
<input type="password" id="telegram-bot-token" placeholder="123456:ABC-DEF..." autocomplete="off">
|
|
991
|
-
</div>
|
|
992
|
-
<div class="telegram-field">
|
|
993
|
-
<label for="telegram-chat-id">Chat ID</label>
|
|
994
|
-
<input type="text" id="telegram-chat-id" placeholder="-100123456789" autocomplete="off">
|
|
995
|
-
</div>
|
|
996
|
-
<div class="telegram-field">
|
|
997
|
-
<label for="telegram-afk-timeout">AFK Approval Timeout (minutes)</label>
|
|
998
|
-
<input type="number" id="telegram-afk-timeout" min="1" max="120" value="15" style="width:80px;">
|
|
999
|
-
</div>
|
|
1000
|
-
|
|
1001
|
-
<div class="telegram-notify-section">
|
|
1002
|
-
<label class="telegram-field-label">Notification Events</label>
|
|
1003
|
-
<div class="telegram-notify-grid">
|
|
1004
|
-
<label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-session" checked> Session complete</label>
|
|
1005
|
-
<label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-workflow" checked> Workflow complete</label>
|
|
1006
|
-
<label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-chain" checked> Chain complete</label>
|
|
1007
|
-
<label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-agent" checked> Agent complete</label>
|
|
1008
|
-
<label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-orchestrator" checked> Orchestrator complete</label>
|
|
1009
|
-
<label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-dag" checked> DAG complete</label>
|
|
1010
|
-
<label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-errors" checked> Errors & failures</label>
|
|
1011
|
-
<label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-permissions" checked> Permission requests (AFK approve/deny)</label>
|
|
1012
|
-
<label class="telegram-toggle-row"><input type="checkbox" id="tg-notify-start" checked> Task start</label>
|
|
1013
|
-
</div>
|
|
1014
|
-
</div>
|
|
1015
|
-
|
|
1016
|
-
<div class="telegram-actions">
|
|
1017
|
-
<button class="btn btn-secondary" id="telegram-test-btn">Send Test</button>
|
|
1018
|
-
<button class="btn btn-primary" id="telegram-save-btn">Save</button>
|
|
1019
|
-
</div>
|
|
1020
|
-
<div id="telegram-status" class="telegram-status hidden"></div>
|
|
1021
|
-
<details class="telegram-help">
|
|
1022
|
-
<summary>Setup instructions</summary>
|
|
1023
|
-
<ol>
|
|
1024
|
-
<li>Open Telegram and search for <strong>@BotFather</strong></li>
|
|
1025
|
-
<li>Send <code>/newbot</code> and follow the prompts to create a bot</li>
|
|
1026
|
-
<li>Copy the <strong>Bot Token</strong> and paste it above</li>
|
|
1027
|
-
<li>Start a chat with your new bot (send <code>/start</code>)</li>
|
|
1028
|
-
<li>To find your <strong>Chat ID</strong>, send a message to the bot, then visit:<br>
|
|
1029
|
-
<code>https://api.telegram.org/bot<TOKEN>/getUpdates</code><br>
|
|
1030
|
-
Look for <code>"chat":{"id":...</code> in the response</li>
|
|
1031
|
-
<li>For group chats, add the bot to the group and use the group's chat ID (starts with <code>-</code>)</li>
|
|
1032
|
-
</ol>
|
|
1033
|
-
</details>
|
|
1034
|
-
</div>
|
|
1035
|
-
</div>
|
|
1036
|
-
</div>
|
|
1037
|
-
</div>
|
|
1038
|
-
|
|
1039
|
-
<!-- MCP Server Management Modal -->
|
|
1040
|
-
<div id="mcp-modal" class="modal-overlay hidden">
|
|
1041
|
-
<div class="modal mcp-modal">
|
|
1042
|
-
<div class="modal-header">
|
|
1043
|
-
<h3>MCP Servers</h3>
|
|
1044
|
-
<button id="mcp-modal-close" class="modal-close">×</button>
|
|
1045
|
-
</div>
|
|
1046
|
-
<div id="mcp-server-list" class="mcp-server-list"></div>
|
|
1047
|
-
<div id="mcp-form-container" class="mcp-form-container hidden">
|
|
1048
|
-
<h4 id="mcp-form-title" class="mcp-form-title">Add Server</h4>
|
|
1049
|
-
<form id="mcp-form">
|
|
1050
|
-
<label for="mcp-name">Name</label>
|
|
1051
|
-
<input id="mcp-name" type="text" placeholder="my-server" required>
|
|
1052
|
-
<label for="mcp-type">Type</label>
|
|
1053
|
-
<select id="mcp-type">
|
|
1054
|
-
<option value="stdio">stdio</option>
|
|
1055
|
-
<option value="sse">sse</option>
|
|
1056
|
-
<option value="http">http</option>
|
|
1057
|
-
</select>
|
|
1058
|
-
<div id="mcp-stdio-fields">
|
|
1059
|
-
<label for="mcp-command">Command</label>
|
|
1060
|
-
<input id="mcp-command" type="text" placeholder="npx -y @modelcontextprotocol/server-name">
|
|
1061
|
-
<label for="mcp-args">Args (one per line)</label>
|
|
1062
|
-
<textarea id="mcp-args" rows="2" placeholder="--flag value"></textarea>
|
|
1063
|
-
<label for="mcp-env">Environment (KEY=VALUE, one per line)</label>
|
|
1064
|
-
<textarea id="mcp-env" rows="2" placeholder="API_KEY=xxx"></textarea>
|
|
1065
|
-
</div>
|
|
1066
|
-
<div id="mcp-url-fields" class="hidden">
|
|
1067
|
-
<label for="mcp-url">URL</label>
|
|
1068
|
-
<input id="mcp-url" type="text" placeholder="https://...">
|
|
1069
|
-
</div>
|
|
1070
|
-
<div class="modal-actions">
|
|
1071
|
-
<button type="button" id="mcp-form-cancel" class="modal-btn-cancel">Cancel</button>
|
|
1072
|
-
<button type="submit" id="mcp-form-save" class="modal-btn-save">Save</button>
|
|
1073
|
-
</div>
|
|
1074
|
-
</form>
|
|
1075
|
-
</div>
|
|
1076
|
-
<div class="mcp-modal-footer">
|
|
1077
|
-
<button id="mcp-add-btn" class="modal-btn-save">+ Add Server</button>
|
|
1078
|
-
</div>
|
|
1079
|
-
</div>
|
|
1080
|
-
</div>
|
|
1081
|
-
|
|
1082
|
-
<!-- Add Project Modal -->
|
|
1083
|
-
<div id="add-project-modal" class="modal-overlay hidden">
|
|
1084
|
-
<div class="modal add-project-modal">
|
|
1085
|
-
<div class="modal-header">
|
|
1086
|
-
<h3>Add Project</h3>
|
|
1087
|
-
<button id="add-project-close" class="modal-close">×</button>
|
|
1088
|
-
</div>
|
|
1089
|
-
<div class="add-project-body">
|
|
1090
|
-
<div id="folder-breadcrumb" class="folder-breadcrumb"></div>
|
|
1091
|
-
<div id="folder-list" class="folder-list"></div>
|
|
1092
|
-
<div class="folder-select-row">
|
|
1093
|
-
<input id="add-project-name" type="text" placeholder="Project name" autocomplete="off">
|
|
1094
|
-
<button id="add-project-confirm" class="modal-btn-save">Add</button>
|
|
1095
|
-
</div>
|
|
1096
|
-
</div>
|
|
1097
|
-
</div>
|
|
1098
|
-
</div>
|
|
1099
|
-
|
|
1100
|
-
<!-- Status Bar -->
|
|
1101
|
-
<footer class="status-bar" id="status-bar">
|
|
1102
|
-
<div class="status-bar-left">
|
|
1103
|
-
<span class="sb-item sb-version" id="sb-version" title="Claudeck version"></span>
|
|
1104
|
-
<span class="sb-sep"></span>
|
|
1105
|
-
<span class="sb-item sb-connection" id="sb-connection" title="Connection status">
|
|
1106
|
-
<span class="sb-dot" id="sb-dot"></span>
|
|
1107
|
-
<span id="sb-connection-text">connecting</span>
|
|
1108
|
-
</span>
|
|
1109
|
-
<span class="sb-sep"></span>
|
|
1110
|
-
<span class="sb-item sb-branch" id="sb-branch" title="Current git branch">
|
|
1111
|
-
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>
|
|
1112
|
-
<span id="sb-branch-name">--</span>
|
|
1113
|
-
</span>
|
|
1114
|
-
<span class="sb-sep"></span>
|
|
1115
|
-
<span class="sb-item sb-project" id="sb-project" title="Current project">
|
|
1116
|
-
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
|
|
1117
|
-
<span id="sb-project-name">no project</span>
|
|
1118
|
-
</span>
|
|
1119
|
-
</div>
|
|
1120
|
-
<div class="status-bar-center">
|
|
1121
|
-
<span class="sb-item sb-activity" id="sb-activity"></span>
|
|
1122
|
-
</div>
|
|
1123
|
-
<div class="status-bar-right">
|
|
1124
|
-
<span class="sb-item sb-bg-sessions hidden" id="sb-bg-sessions" title="Background sessions">
|
|
1125
|
-
<span class="sb-bg-dot"></span>
|
|
1126
|
-
<span id="sb-bg-count">0</span> bg
|
|
1127
|
-
</span>
|
|
1128
|
-
<span class="sb-sep sb-bg-sep hidden" id="sb-bg-sep"></span>
|
|
1129
|
-
<span class="sb-item sb-tokens hidden" id="sb-streaming-tokens" title="Streaming tokens">
|
|
1130
|
-
<span id="sb-tokens-value">~0 tokens</span>
|
|
1131
|
-
</span>
|
|
1132
|
-
<span class="sb-sep sb-tokens-sep hidden" id="sb-tokens-sep"></span>
|
|
1133
|
-
<span class="sb-item sb-context-gauge" id="sb-context-gauge-item">
|
|
1134
|
-
<span id="context-gauge" class="context-gauge hidden" title="Session context usage">
|
|
1135
|
-
<span class="context-gauge-bar"><span id="context-gauge-fill" class="context-gauge-fill"></span></span>
|
|
1136
|
-
<span id="context-gauge-label" class="context-gauge-label">0/200k</span>
|
|
1137
|
-
</span>
|
|
1138
|
-
</span>
|
|
1139
|
-
<span class="sb-sep hidden" id="sb-gauge-sep"></span>
|
|
1140
|
-
<span class="sb-item sb-credits" id="sb-credits" title="Credits">
|
|
1141
|
-
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
|
|
1142
|
-
<div class="sb-credits-popup" id="sb-credits-popup">
|
|
1143
|
-
<div class="sb-credits-header">Credits</div>
|
|
1144
|
-
<div class="sb-credits-body">
|
|
1145
|
-
<div class="sb-credits-row">
|
|
1146
|
-
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
|
1147
|
-
<div class="sb-credits-info">
|
|
1148
|
-
<span class="sb-credits-role">Creator & Architect</span>
|
|
1149
|
-
<span class="sb-credits-name">Hamed Farag</span>
|
|
1150
|
-
</div>
|
|
1151
|
-
</div>
|
|
1152
|
-
<div class="sb-credits-divider"></div>
|
|
1153
|
-
<div class="sb-credits-row">
|
|
1154
|
-
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#a78bfa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a4 4 0 0 0-4 4c0 2 2 3 2 5h4c0-2 2-3 2-5a4 4 0 0 0-4-4z"/><line x1="10" y1="17" x2="14" y2="17"/><line x1="10" y1="20" x2="14" y2="20"/><line x1="11" y1="23" x2="13" y2="23"/></svg>
|
|
1155
|
-
<div class="sb-credits-info">
|
|
1156
|
-
<span class="sb-credits-role">AI Assistant</span>
|
|
1157
|
-
<span class="sb-credits-name">Claude Code AI</span>
|
|
1158
|
-
</div>
|
|
1159
|
-
</div>
|
|
1160
|
-
</div>
|
|
1161
|
-
<div class="sb-credits-sponsor">
|
|
1162
|
-
<div class="sb-credits-row">
|
|
1163
|
-
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
|
|
1164
|
-
<div class="sb-credits-info">
|
|
1165
|
-
<span class="sb-credits-role">Sponsor</span>
|
|
1166
|
-
<span class="sb-credits-name">WakeCap</span>
|
|
1167
|
-
</div>
|
|
1168
|
-
</div>
|
|
1169
|
-
</div>
|
|
1170
|
-
<a class="sb-credits-kofi" href="https://ko-fi.com/hamedfarag" target="_blank" rel="noopener noreferrer">
|
|
1171
|
-
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#ff5e5b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8h1a4 4 0 0 1 0 8h-1"/><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/></svg>
|
|
1172
|
-
<span>Support on Ko-fi</span>
|
|
1173
|
-
</a>
|
|
1174
|
-
</div>
|
|
1175
|
-
</span>
|
|
1176
|
-
<span class="sb-sep sb-credits-sep"></span>
|
|
1177
|
-
<span class="sb-item sb-cost sb-cost-hint" id="sb-cost">
|
|
1178
|
-
<span id="sb-session-cost">$0.00</span>
|
|
1179
|
-
<span class="sb-cost-pipe">/</span>
|
|
1180
|
-
<span id="sb-total-cost">$0.00</span>
|
|
1181
|
-
<div class="sb-hint-popup">
|
|
1182
|
-
<div class="sb-hint-header">Session / Total Cost</div>
|
|
1183
|
-
<div class="sb-hint-body">
|
|
1184
|
-
<p>Every message carries a fixed <strong>~20k token</strong> overhead from the Claude Code SDK — this includes the system prompt (~12-15k), core tool schemas (~4-5k), and environment context (~1k).</p>
|
|
1185
|
-
<p>This cost is unavoidable and cannot be reduced. Disabling optional tools in Session settings saves only ~2-3k tokens.</p>
|
|
1186
|
-
<p class="sb-hint-dim">Subsequent turns benefit from Anthropic's prompt caching, which significantly reduces the effective cost.</p>
|
|
1187
|
-
</div>
|
|
1188
|
-
</div>
|
|
1189
|
-
</span>
|
|
1190
|
-
</div>
|
|
1191
|
-
</footer>
|
|
1192
527
|
|
|
1193
528
|
<!-- Toast Container -->
|
|
1194
529
|
<div id="toast-container" class="toast-container"></div>
|