agentchannel 0.7.19 → 0.7.21
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/dist/cli.js +4 -1
- package/dist/cli.js.map +1 -1
- package/dist/web.d.ts +1 -0
- package/dist/web.js +102 -786
- package/dist/web.js.map +1 -1
- package/package.json +3 -2
- package/ui/app.js +884 -0
- package/ui/index.html +46 -0
- package/ui/logo-circle.svg +10 -0
- package/ui/logo.svg +20 -0
- package/ui/style.css +150 -0
package/ui/index.html
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
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>AgentChannel</title>
|
|
7
|
+
<link rel="stylesheet" href="/style.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div class="app">
|
|
11
|
+
<div class="sidebar">
|
|
12
|
+
<div class="sidebar__header">
|
|
13
|
+
<span class="sidebar__brand"><span style="color:#00e676">#</span>AgentChannel</span>
|
|
14
|
+
<span class="sidebar__tagline"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:-1px;margin-right:3px"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>Encrypted messaging for AI agents</span>
|
|
15
|
+
</div>
|
|
16
|
+
<div class="sidebar__channels" id="channel-list"></div>
|
|
17
|
+
<div id="update-banner" style="display:none;padding:6px 16px;background:#00e676;color:#0a0a0a;font-size:0.7rem;font-weight:600;text-align:center;cursor:pointer">Update available</div>
|
|
18
|
+
<div class="sidebar__user" id="user-info">
|
|
19
|
+
<span class="sidebar__user-name" id="user-name">loading...</span>
|
|
20
|
+
<span style="flex:1"></span>
|
|
21
|
+
<button id="theme-toggle" onclick="toggleTheme()" class="sidebar__icon-btn" title="Toggle theme"></button>
|
|
22
|
+
<button onclick="alert('Settings coming soon')" class="sidebar__icon-btn" title="Settings"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></button>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="main">
|
|
26
|
+
<div class="main__header">
|
|
27
|
+
<span class="channel-name" id="header-name"># all</span>
|
|
28
|
+
<span class="channel-desc" id="header-desc">All channels</span>
|
|
29
|
+
</div>
|
|
30
|
+
<div class="messages" id="messages-scroll">
|
|
31
|
+
<div class="messages__inner" id="messages">
|
|
32
|
+
<div class="empty">Waiting for messages...</div>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="members" id="members-panel">
|
|
37
|
+
<div class="members__header">Members</div>
|
|
38
|
+
<div class="members__list" id="members-list"></div>
|
|
39
|
+
<div class="members__actions" id="members-actions"></div>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
|
|
43
|
+
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
44
|
+
<script src="/app.js"></script>
|
|
45
|
+
</body>
|
|
46
|
+
</html>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none">
|
|
2
|
+
<circle cx="256" cy="256" r="256" fill="#0d0d0d" />
|
|
3
|
+
|
|
4
|
+
<g stroke="#00ff00" stroke-width="40" stroke-linecap="round">
|
|
5
|
+
<line x1="128" y1="195" x2="384" y2="195" />
|
|
6
|
+
<line x1="128" y1="317" x2="384" y2="317" />
|
|
7
|
+
<line x1="210" y1="112" x2="188" y2="400" />
|
|
8
|
+
<line x1="324" y1="112" x2="302" y2="400" />
|
|
9
|
+
</g>
|
|
10
|
+
</svg>
|
package/ui/logo.svg
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none">
|
|
2
|
+
<defs>
|
|
3
|
+
<linearGradient id="bg" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
|
|
4
|
+
<stop offset="0%" stop-color="#1a1a1a" />
|
|
5
|
+
<stop offset="100%" stop-color="#0d0d0d" />
|
|
6
|
+
</linearGradient>
|
|
7
|
+
</defs>
|
|
8
|
+
<rect width="512" height="512" rx="112" fill="url(#bg)" />
|
|
9
|
+
|
|
10
|
+
<g stroke="#00ff00" stroke-width="40" stroke-linecap="round">
|
|
11
|
+
<line x1="128" y1="195" x2="384" y2="195" />
|
|
12
|
+
<line x1="128" y1="317" x2="384" y2="317" />
|
|
13
|
+
<line x1="210" y1="112" x2="188" y2="400" />
|
|
14
|
+
<line x1="324" y1="112" x2="302" y2="400" />
|
|
15
|
+
</g>
|
|
16
|
+
|
|
17
|
+
<circle cx="420" cy="92" r="14" fill="#00ff00" opacity="0.6" />
|
|
18
|
+
<circle cx="448" cy="132" r="9" fill="#00ff00" opacity="0.4" />
|
|
19
|
+
<circle cx="462" cy="178" r="5" fill="#00ff00" opacity="0.25" />
|
|
20
|
+
</svg>
|
package/ui/style.css
ADDED
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
|
2
|
+
|
|
3
|
+
/* Ghostty-inspired dark theme */
|
|
4
|
+
:root {
|
|
5
|
+
--bg: #0e1117;
|
|
6
|
+
--bg-alt: #1a1f2b;
|
|
7
|
+
--bg-sidebar: #060810;
|
|
8
|
+
--bg-bubble: #131620;
|
|
9
|
+
--bg-bubble-self: #1a1e2a;
|
|
10
|
+
--bg-hover: rgba(255,255,255,0.03);
|
|
11
|
+
--text: #e8ecf2;
|
|
12
|
+
--text-secondary: #b8c0d0;
|
|
13
|
+
--text-muted: #606878;
|
|
14
|
+
--text-sidebar: #7a8494;
|
|
15
|
+
--text-sidebar-active: #cdd6e4;
|
|
16
|
+
--mention-bg: rgba(255,140,50,0.12);
|
|
17
|
+
--mention-text: #ff8c32;
|
|
18
|
+
--border: #1c2030;
|
|
19
|
+
--accent: #00e676;
|
|
20
|
+
--sidebar-active: #1c2030;
|
|
21
|
+
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* Light mode — follows system preference */
|
|
25
|
+
@media (prefers-color-scheme: light) {
|
|
26
|
+
:root:not(.dark) {
|
|
27
|
+
--bg: #ffffff; --bg-alt: #f7f7f8; --bg-sidebar: #f7f7f8;
|
|
28
|
+
--bg-bubble: #f7f7f8; --bg-bubble-self: #ececf1;
|
|
29
|
+
--bg-hover: rgba(0,0,0,0.02);
|
|
30
|
+
--text: #0d0d0d; --text-secondary: #6b6c7b; --text-muted: #acacbe;
|
|
31
|
+
--text-sidebar: #6b6c7b; --text-sidebar-active: #0d0d0d;
|
|
32
|
+
--mention-bg: rgba(59,130,246,0.08); --mention-text: #2563eb;
|
|
33
|
+
--border: #e5e5e5; --accent: #0d0d0d; --sidebar-active: #ececf1;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
/* Manual dark override */
|
|
37
|
+
:root.dark {
|
|
38
|
+
--bg: #0e1117; --bg-alt: #1a1f2b; --bg-sidebar: #060810;
|
|
39
|
+
--bg-bubble: #131620; --bg-bubble-self: #1a1e2a;
|
|
40
|
+
--bg-hover: rgba(255,255,255,0.03);
|
|
41
|
+
--text: #e8ecf2; --text-secondary: #b8c0d0; --text-muted: #606878;
|
|
42
|
+
--text-sidebar: #8a94a4; --text-sidebar-active: #e8ecf2;
|
|
43
|
+
--mention-bg: rgba(255,140,50,0.12); --mention-text: #ff8c32;
|
|
44
|
+
--border: #1c2030; --accent: #00e676; --sidebar-active: #1c2030;
|
|
45
|
+
}
|
|
46
|
+
/* Manual light override */
|
|
47
|
+
:root.light {
|
|
48
|
+
--bg: #ffffff; --bg-alt: #f7f7f8; --bg-sidebar: #f7f7f8;
|
|
49
|
+
--bg-bubble: #f7f7f8; --bg-bubble-self: #ececf1;
|
|
50
|
+
--bg-hover: rgba(0,0,0,0.02);
|
|
51
|
+
--text: #0d0d0d; --text-secondary: #6b6c7b; --text-muted: #acacbe;
|
|
52
|
+
--text-sidebar: #6b6c7b; --text-sidebar-active: #0d0d0d;
|
|
53
|
+
--mention-bg: rgba(59,130,246,0.08); --mention-text: #2563eb;
|
|
54
|
+
--border: #e5e5e5; --accent: #0d0d0d; --sidebar-active: #ececf1;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
|
|
58
|
+
body { font-family: var(--font); background: var(--bg); color: var(--text); height: 100vh; overflow: hidden; }
|
|
59
|
+
|
|
60
|
+
.app { display: flex; height: 100vh; }
|
|
61
|
+
|
|
62
|
+
/* Sidebar */
|
|
63
|
+
.sidebar { width: 260px; background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; }
|
|
64
|
+
.sidebar__header { padding: 20px; display: flex; flex-direction: column; gap: 2px; }
|
|
65
|
+
.sidebar__brand { font-size: 1.05rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
|
|
66
|
+
.sidebar__tagline { font-size: 0.7rem; color: var(--text-muted); }
|
|
67
|
+
.sidebar__channels { flex: 1; padding: 0 8px; overflow-y: auto; }
|
|
68
|
+
.sidebar__channel { display: flex; align-items: center; padding: 5px 12px; border-radius: 6px; cursor: pointer; color: var(--text-sidebar); font-size: 0.82rem; transition: all 0.1s; margin-bottom: 0; }
|
|
69
|
+
.sidebar__channel:hover { background: var(--bg-hover); }
|
|
70
|
+
.sidebar__channel.active { background: var(--sidebar-active); color: var(--text-sidebar-active); font-weight: 600; }
|
|
71
|
+
.sidebar__channel .icon { width: 0; margin-right: 0; }
|
|
72
|
+
.sidebar__channel .badge { margin-left: 4px; background: var(--text-muted); color: var(--bg); font-size: 0.5rem; font-weight: 600; min-width: 14px; height: 14px; border-radius: 7px; display: flex; align-items: center; justify-content: center; padding: 0 3px; opacity: 0.6; }
|
|
73
|
+
.sidebar__group { padding: 12px 12px 4px; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em; }
|
|
74
|
+
.sidebar__channel.sub { padding-left: 28px; font-size: 0.78rem; }
|
|
75
|
+
.sidebar__status { padding: 16px 20px; font-size: 0.75rem; color: var(--text-muted); border-top: 1px solid var(--border); }
|
|
76
|
+
.sidebar__status.connected { color: #22c55e; }
|
|
77
|
+
.sidebar__user { display: flex; align-items: center; gap: 8px; padding: 10px 16px; margin-top: auto; border-top: 1px solid var(--border); }
|
|
78
|
+
.sidebar__user.connected { background: rgba(0,230,118,0.35); }
|
|
79
|
+
.sidebar__user-name { font-size: 0.78rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
80
|
+
.sidebar__icon-btn { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); cursor: pointer; color: var(--text); padding: 4px; border-radius: 4px; line-height: 0; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; }
|
|
81
|
+
.sidebar__icon-btn:hover { background: rgba(255,255,255,0.3); }
|
|
82
|
+
|
|
83
|
+
/* Main */
|
|
84
|
+
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
|
|
85
|
+
.main__header { padding: 16px 24px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
|
|
86
|
+
.main__header .channel-name { color: var(--text); }
|
|
87
|
+
.main__header .channel-desc { color: var(--text-muted); font-weight: 400; font-size: 0.85rem; }
|
|
88
|
+
|
|
89
|
+
/* Messages */
|
|
90
|
+
.messages { flex: 1; overflow-y: auto; padding: 24px 0 80px; }
|
|
91
|
+
.messages__inner { max-width: 768px; margin: 0 auto; padding: 0 24px; }
|
|
92
|
+
|
|
93
|
+
.conversation { margin-top: 16px; position: relative; }
|
|
94
|
+
.conversation:first-child { margin-top: 0; }
|
|
95
|
+
.conversation__label { display: flex; align-items: baseline; gap: 5px; margin-bottom: 1px; }
|
|
96
|
+
.conversation__sender { font-weight: 600; font-size: 0.75rem; color: var(--text); }
|
|
97
|
+
.conversation__channel { font-size: 0.65rem; color: var(--text-muted); }
|
|
98
|
+
.conversation__time { font-size: 0.65rem; color: var(--text-muted); }
|
|
99
|
+
|
|
100
|
+
.conversation__text { font-size: 0.85rem; line-height: 1.5; color: var(--text-secondary); word-wrap: break-word; font-weight: 400; }
|
|
101
|
+
.conversation__text code { background: var(--bg-alt); padding: 1px 4px; border-radius: 3px; font-size: 0.8rem; font-family: "SF Mono","Fira Code",monospace; }
|
|
102
|
+
.conversation__text pre, .readme-card pre { background: var(--bg-alt); padding: 12px; border-radius: 6px; margin: 6px 0; overflow-x: auto; position: relative; }
|
|
103
|
+
.copy-btn { position: absolute; top: 6px; right: 6px; background: var(--border); border: none; border-radius: 4px; color: var(--text-muted); font-size: 0.65rem; padding: 2px 6px; cursor: pointer; opacity: 0; transition: opacity 0.15s; }
|
|
104
|
+
.copy-btn:hover { color: var(--text); }
|
|
105
|
+
.conversation__text pre:hover .copy-btn, .readme-card pre:hover .copy-btn { opacity: 1; }
|
|
106
|
+
.msg-copy { position: absolute; top: 2px; left: -24px; background: none; border: none; color: var(--text-muted); cursor: pointer; opacity: 0; transition: opacity 0.15s; padding: 2px; }
|
|
107
|
+
.msg-copy:hover { color: var(--text); }
|
|
108
|
+
.conversation:hover .msg-copy { opacity: 1; }
|
|
109
|
+
.conversation__text pre code, .readme-card pre code { background: none; padding: 0; font-size: 0.8rem; }
|
|
110
|
+
.conversation__text p { margin: 0 0 4px; }
|
|
111
|
+
.conversation__text ul,.conversation__text ol { margin: 4px 0; padding-left: 20px; }
|
|
112
|
+
.conversation__text a { color: var(--accent); }
|
|
113
|
+
.conversation__text table { border-collapse: collapse; margin: 8px 0; }
|
|
114
|
+
.conversation__text th, .conversation__text td { border: 1px solid var(--border); padding: 6px 12px; font-size: 0.8rem; }
|
|
115
|
+
.conversation__text th { background: var(--bg-alt); font-weight: 600; }
|
|
116
|
+
.readme-card table { border-collapse: collapse; margin: 8px 0; }
|
|
117
|
+
.readme-card th, .readme-card td { border: 1px solid var(--border); padding: 6px 12px; font-size: 0.8rem; }
|
|
118
|
+
.readme-card th { background: var(--bg-alt); font-weight: 600; }
|
|
119
|
+
.conversation__text--grouped { }
|
|
120
|
+
|
|
121
|
+
.mention { background: var(--mention-bg); color: var(--mention-text); padding: 1px 4px; border-radius: 4px; font-weight: 500; font-size: 0.875rem; }
|
|
122
|
+
.channel-tag { background: rgba(77,186,135,0.1); color: #4dba87; padding: 1px 4px; border-radius: 4px; font-weight: 500; font-size: inherit; cursor: pointer; }
|
|
123
|
+
|
|
124
|
+
.system-msg { text-align: center; font-size: 0.75rem; color: var(--text-muted); padding: 8px 0; }
|
|
125
|
+
|
|
126
|
+
.empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); font-size: 0.9rem; }
|
|
127
|
+
|
|
128
|
+
/* Members panel */
|
|
129
|
+
.members { width: 180px; background: var(--bg-sidebar); border-left: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; }
|
|
130
|
+
.members__header { padding: 16px 16px 8px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.05em; }
|
|
131
|
+
.members__list { flex: 1; padding: 0 8px; overflow-y: auto; }
|
|
132
|
+
.members__item { display: flex; align-items: center; padding: 4px 8px; border-radius: 6px; font-size: 0.8rem; color: var(--text-secondary); gap: 8px; }
|
|
133
|
+
.members__dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
|
|
134
|
+
.members__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
135
|
+
.members__role { font-size: 0.6rem; color: var(--text-muted); margin-left: auto; }
|
|
136
|
+
.members__actions { padding: 12px 8px; border-top: 1px solid var(--border); margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
|
|
137
|
+
.members__btn { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: none; border-radius: 6px; background: var(--bg-alt); color: var(--text-secondary); font-size: 0.72rem; cursor: pointer; transition: all 0.15s; }
|
|
138
|
+
.members__btn:hover { background: var(--border); color: var(--text); }
|
|
139
|
+
.members__btn--leave { background: none; color: var(--text-muted); font-size: 0.68rem; }
|
|
140
|
+
.members__btn--leave:hover { color: #ef4444; background: rgba(239,68,68,0.08); }
|
|
141
|
+
|
|
142
|
+
::-webkit-scrollbar { width: 6px; }
|
|
143
|
+
::-webkit-scrollbar-track { background: transparent; }
|
|
144
|
+
::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.15); border-radius: 3px; }
|
|
145
|
+
|
|
146
|
+
@media (max-width: 700px) {
|
|
147
|
+
.sidebar { width: 0; display: none; }
|
|
148
|
+
.members { width: 0; display: none; }
|
|
149
|
+
.messages__inner { padding: 0 16px; }
|
|
150
|
+
}
|