agentgui 1.0.895 → 1.0.897

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/static/index.html CHANGED
@@ -1,5 +1,5 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en" class="light">
2
+ <html lang="en" data-theme="dark">
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
@@ -45,6 +45,7 @@
45
45
  <link rel="stylesheet" href="/gm/css/main.css">
46
46
  <link rel="stylesheet" href="/gm/css/tools-popup.css" media="print" onload="this.media='all'">
47
47
  <link rel="stylesheet" href="/gm/css/brand-bible.css">
48
+ <link rel="stylesheet" href="/gm/css/gmail-skin.css">
48
49
  </head>
49
50
  <body>
50
51
  <a href="#app" class="skip-link">Skip to conversation</a>
@@ -53,10 +54,30 @@
53
54
  <div class="sidebar-overlay" data-sidebar-overlay></div>
54
55
 
55
56
  <div class="app-shell">
57
+ <!-- ===== GMAIL NAV RAIL ===== -->
58
+ <nav class="nav-rail" aria-label="Navigation">
59
+ <button class="nav-rail-item nav-rail-compose" id="newConversationBtnRail" data-new-conversation title="Compose (Ctrl+N)" aria-label="New conversation">
60
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
61
+ <span class="nav-rail-label">Compose</span>
62
+ </button>
63
+ <button class="nav-rail-item nav-rail-inbox active" data-nav-rail="inbox" title="Inbox" aria-label="Inbox">
64
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
65
+ <span class="nav-rail-label">Chats</span>
66
+ </button>
67
+ <button class="nav-rail-item" id="viewArchivedBtnRail" data-nav-rail="archived" title="Archived" aria-label="Archived conversations">
68
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 8v13H3V8"/><path d="M1 3h22v5H1z"/><path d="M10 12h4"/></svg>
69
+ <span class="nav-rail-label">Archived</span>
70
+ </button>
71
+ <button class="nav-rail-item" id="toolsManagerBtnRail" data-nav-rail="tools" title="Tools" aria-label="Tools">
72
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
73
+ <span class="nav-rail-label">Tools</span>
74
+ </button>
75
+ </nav>
76
+
56
77
  <!-- ===== SIDEBAR ===== -->
57
78
  <aside class="sidebar" data-sidebar role="navigation" aria-label="Conversation history">
58
79
  <div class="sidebar-header">
59
- <h2>AgentGUI</h2>
80
+ <h2 class="brand-line">247420<span class="slash"> / </span>agentgui</h2>
60
81
  <div class="sidebar-header-actions">
61
82
  <div class="sidebar-overflow-menu-wrapper">
62
83
  <button class="sidebar-overflow-btn" id="sidebarOverflowBtn" title="More options" aria-label="More options">···</button>
@@ -79,7 +100,7 @@
79
100
  </button>
80
101
  </div>
81
102
  </div>
82
- <button id="newConversationBtn" class="sidebar-new-btn" data-new-conversation title="Start new conversation (Ctrl+N)">✦ New</button>
103
+ <button id="newConversationBtn" class="sidebar-new-btn btn-stamp green" data-new-conversation title="Start new conversation (Ctrl+N)">new</button>
83
104
  </div>
84
105
  </div>
85
106
  <div class="sidebar-search-bar" id="sidebarSearchBar">
@@ -122,7 +143,11 @@
122
143
  </svg>
123
144
  </button>
124
145
 
125
- <h1 class="header-title">AgentGUI</h1>
146
+ <div class="header-search-wrap">
147
+ <svg class="header-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
148
+ <input class="header-search-input" id="headerSearchInput" type="text" placeholder="Search in chats" autocomplete="off" spellcheck="false" aria-label="Search conversations">
149
+ </div>
150
+ <h1 class="header-title brand-line">247420<span class="slash"> / </span>agentgui<span class="slash"> / </span><span class="leaf" id="headerLeaf">chat</span></h1>
126
151
 
127
152
  <div class="header-controls">
128
153
  <div class="script-buttons" id="scriptButtons" style="display:none;">
@@ -237,13 +262,13 @@
237
262
  <div style="display:none">
238
263
  <select class="agent-selector sub-agent-selector" data-agent-selector title="Select sub-agent"></select>
239
264
  <select id="presetSelector" class="preset-selector" title="Load preset"></select>
240
- <textarea class="message-textarea" data-message-input rows="1" style="position:absolute;opacity:0;pointer-events:none;"></textarea>
241
265
  </div>
242
266
  <div class="input-card">
243
267
  <textarea
244
- class="input-card-textarea"
268
+ class="input-card-textarea message-textarea"
245
269
  id="inputCardTextarea"
246
- placeholder="Message AgentGUI... (Ctrl+Enter to send)"
270
+ data-message-input
271
+ placeholder="message agentgui..."
247
272
  aria-label="Message input"
248
273
  rows="1"
249
274
  ></textarea>
@@ -6,28 +6,29 @@ Object.assign(AgentGUIClient.prototype, {
6
6
  const agentOptions = agents.map(a =>
7
7
  `<option value="${this.escapeHtml(a.id)}">${this.escapeHtml(a.name.split(/[\s\-]+/)[0])}</option>`
8
8
  ).join('');
9
+ const agentList = agents.length > 0 ? agents.map(a => a.name.split(/[\s\-]+/)[0].toLowerCase()).join(', ') : 'claude, gemini, opencode, kilo, codex';
9
10
  outputEl.innerHTML = `
10
- <div style="display:flex;align-items:center;justify-content:center;height:100%;flex-direction:column;gap:2rem;padding:2rem;">
11
- <div style="text-align:center;">
12
- <h1 style="margin:0;font-size:2.5rem;color:var(--color-text-primary);">Welcome to AgentGUI</h1>
13
- <p style="margin:1rem 0 0 0;font-size:1.1rem;color:var(--color-text-secondary);">Start a new conversation or select one from the sidebar</p>
11
+ <div class="welcome-pane">
12
+ <div class="welcome-head">
13
+ <div class="t-micro">247420 / agentgui / welcome</div>
14
+ <h1 class="welcome-title">a state machine for coding agents.</h1>
15
+ <p class="welcome-lede">start a new conversation or pick one from the sidebar. pick your agent and model below.</p>
14
16
  </div>
15
17
  ${agents.length > 0 ? `
16
- <div style="display:flex;flex-direction:column;align-items:center;gap:0.75rem;">
17
- <label style="font-size:0.85rem;color:var(--color-text-secondary);font-weight:500;">Select Agent</label>
18
- <select id="welcomeAgentSelect" style="padding:0.5rem 1rem;border-radius:0.375rem;border:1px solid var(--color-border);background:var(--color-bg-secondary);color:var(--color-text-primary);font-size:1rem;cursor:pointer;">
19
- ${agentOptions}
20
- </select>
21
- </div>
22
- ` : ''}
23
- <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;max-width:600px;">
24
- <div style="padding:1.5rem;border-radius:0.5rem;background:var(--color-bg-secondary);border:1px solid var(--color-border);">
25
- <h3 style="margin:0 0 0.5rem 0;color:var(--color-primary);">New Conversation</h3>
26
- <p style="margin:0;font-size:0.9rem;color:var(--color-text-secondary);">Create a new chat with any AI agent</p>
18
+ <div class="welcome-select-row">
19
+ <span class="t-label mono-dim">select agent</span>
20
+ <select id="welcomeAgentSelect" class="input">${agentOptions}</select>
21
+ </div>` : ''}
22
+ <div class="welcome-rows">
23
+ <div class="row">
24
+ <span class="row-code">01</span>
25
+ <span class="row-title">new conversation</span>
26
+ <span class="row-meta">create a new chat with any agent</span>
27
27
  </div>
28
- <div style="padding:1.5rem;border-radius:0.5rem;background:var(--color-bg-secondary);border:1px solid var(--color-border);">
29
- <h3 style="margin:0 0 0.5rem 0;color:var(--color-primary);">Available Agents</h3>
30
- <p style="margin:0;font-size:0.9rem;color:var(--color-text-secondary);">${agents.length > 0 ? agents.map(a => a.name.split(/[\s\-]+/)[0]).join(', ') : 'Claude Code, Gemini, OpenCode, and more'}</p>
28
+ <div class="row">
29
+ <span class="row-code">02</span>
30
+ <span class="row-title">available agents</span>
31
+ <span class="row-meta">${this.escapeHtml(agentList)}</span>
31
32
  </div>
32
33
  </div>
33
34
  </div>
package/static/theme.js CHANGED
@@ -7,12 +7,11 @@ class ThemeManager {
7
7
 
8
8
  init() {
9
9
  const savedTheme = localStorage.getItem(this.THEME_KEY);
10
- const prefersDark = this.SYSTEM_DARK_MODE.matches;
11
10
 
12
11
  if (savedTheme) {
13
12
  this.setTheme(savedTheme);
14
13
  } else {
15
- this.setTheme(prefersDark ? 'dark' : 'light');
14
+ this.setTheme('dark');
16
15
  }
17
16
 
18
17
  this.SYSTEM_DARK_MODE.addEventListener('change', (e) => {