opc-agent 4.0.37 → 4.0.39

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.
Files changed (3) hide show
  1. package/dist/studio-ui/index.html +20 -20
  2. package/package.json +1 -1
  3. package/src/studio-ui/index.html +20 -20
package/dist/studio-ui/index.html CHANGED
@@ -20,7 +20,7 @@
20
20
  --mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
21
21
  --radius: 14px; --radius-lg: 24px;
22
22
  }
23
- body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; font-size: 15px; line-height: 1.6; background-image: radial-gradient(ellipse at 20% 0%, rgba(139,92,246,0.12) 0%, transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(6,182,212,0.08) 0%, transparent 50%), url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30h60M30 0v60' stroke='rgba(139,92,246,0.04)' stroke-width='0.5'/%3E%3C/svg%3E"); }
23
+ body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; font-size: 18px; line-height: 1.6; background-image: radial-gradient(ellipse at 20% 0%, rgba(139,92,246,0.12) 0%, transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(6,182,212,0.08) 0%, transparent 50%), url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30h60M30 0v60' stroke='rgba(139,92,246,0.04)' stroke-width='0.5'/%3E%3C/svg%3E"); }
24
24
  a { color: var(--accent); text-decoration: none; }
25
25
  button { font-family: var(--font); cursor: pointer; border: none; }
26
26
  input, select, textarea { font-family: var(--font); }
@@ -32,15 +32,15 @@
32
32
  padding: 24px 16px; display: flex; flex-direction: column; position: fixed; height: 100vh; z-index: 100;
33
33
  background-image: linear-gradient(180deg, rgba(139,92,246,0.05) 0%, transparent 30%);
34
34
  }
35
- .sidebar-logo { font-size: 22px; font-weight: 700; padding: 12px 12px; margin-bottom: 28px; display: flex; align-items: center; gap: 10px; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.5px; }
35
+ .sidebar-logo { font-size: 24px; font-weight: 700; padding: 12px 12px; margin-bottom: 28px; display: flex; align-items: center; gap: 10px; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.5px; }
36
36
  .sidebar-logo span { background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
37
37
  .nav-item {
38
38
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px;
39
- cursor: pointer; color: var(--text-muted); transition: all 0.2s ease; font-size: 15px; margin-bottom: 4px; position: relative;
39
+ cursor: pointer; color: var(--text-muted); transition: all 0.2s ease; font-size: 18px; margin-bottom: 4px; position: relative;
40
40
  }
41
41
  .nav-item:hover { background: var(--bg-hover); color: var(--text); transform: translateX(4px); }
42
42
  .nav-item.active { background: var(--accent-light); color: #fff; font-weight: 600; box-shadow: var(--glow-sm); border: 1px solid var(--border); }
43
- .nav-item .icon { width: 24px; text-align: center; font-size: 18px; }
43
+ .nav-item .icon { width: 28px; text-align: center; font-size: 22px; }
44
44
  .main { flex: 1; margin-left: 270px; min-height: 100vh; }
45
45
 
46
46
  /* Mobile */
@@ -58,9 +58,9 @@
58
58
  /* Page container */
59
59
  .page { display: none; padding: 32px; max-width: 1200px; margin: 0 auto; }
60
60
  .page.active { display: block; }
61
- .page-title { font-size: 28px; font-weight: 700; margin-bottom: 8px; background: var(--gradient); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 3s linear infinite; letter-spacing: -0.5px; }
61
+ .page-title { font-size: 32px; font-weight: 700; margin-bottom: 8px; background: var(--gradient); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 3s linear infinite; letter-spacing: -0.5px; }
62
62
  @keyframes shimmer { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
63
- .page-subtitle { color: var(--text-muted); font-size: 15px; margin-bottom: 24px; }
63
+ .page-subtitle { color: var(--text-muted); font-size: 18px; margin-bottom: 24px; }
64
64
 
65
65
  /* Cards */
66
66
  .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; transition: all 0.3s ease; backdrop-filter: blur(10px); box-shadow: var(--card-glow); position: relative; overflow: hidden; }
@@ -70,21 +70,21 @@
70
70
  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
71
71
 
72
72
  /* Buttons */
73
- .btn { padding: 8px 20px; border-radius: 10px; font-size: 14px; font-weight: 500; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px; height: 38px; line-height: 20px; position: relative; overflow: hidden; }
73
+ .btn { padding: 10px 24px; border-radius: 10px; font-size: 18px; font-weight: 500; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px; height: 44px; line-height: 22px; position: relative; overflow: hidden; }
74
74
  .btn-primary { background: var(--gradient-btn); background-size: 200% auto; color: white; box-shadow: var(--glow-sm); }
75
75
  .btn-primary:hover { background-position: right center; transform: translateY(-2px); box-shadow: var(--glow); }
76
76
  .btn-secondary { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); backdrop-filter: blur(10px); }
77
77
  .btn-secondary:hover { border-color: var(--accent); box-shadow: var(--glow-sm); transform: translateY(-1px); }
78
78
  .btn-danger { background: rgba(239,68,68,0.1); color: var(--red); }
79
79
  .btn-danger:hover { background: rgba(239,68,68,0.2); }
80
- .btn-sm { padding: 6px 12px; font-size: 13px; height: 32px; }
81
- .btn-lg { padding: 14px 28px; font-size: 16px; height: 48px; }
80
+ .btn-sm { padding: 8px 16px; font-size: 18px; height: 38px; }
81
+ .btn-lg { padding: 16px 32px; font-size: 24px; height: 56px; }
82
82
 
83
83
  /* Form elements */
84
- .input { width: 100%; padding: 8px 14px; height: 40px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 15px; outline: none; transition: all 0.2s ease; backdrop-filter: blur(5px); }
84
+ .input { width: 100%; padding: 10px 16px; height: 48px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 18px; outline: none; transition: all 0.2s ease; backdrop-filter: blur(5px); }
85
85
  .input:focus { border-color: var(--accent); box-shadow: var(--glow-sm); }
86
86
  .input::placeholder { color: var(--text-dim); }
87
- .label { display: block; font-size: 13px; font-weight: 500; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
87
+ .label { display: block; font-size: 18px; font-weight: 500; color: var(--text-muted); margin-bottom: 8px; letter-spacing: 0.3px; }
88
88
  .form-group { margin-bottom: 20px; }
89
89
  select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23737373' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
90
90
 
@@ -94,22 +94,22 @@
94
94
  .search-bar::before { content: '🔍'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; }
95
95
 
96
96
  /* Tags / Chips */
97
- .chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border); cursor: pointer; transition: all 0.15s; }
97
+ .chip { display: inline-block; padding: 4px 12px; border-radius: 10px; font-size: 18px; background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border); cursor: pointer; transition: all 0.15s; }
98
98
  .chip:hover, .chip.active { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
99
99
  .chip-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
100
100
 
101
101
  /* Template card */
102
102
  .tpl-card { cursor: pointer; }
103
- .tpl-card .tpl-icon { font-size: 32px; margin-bottom: 12px; }
104
- .tpl-card .tpl-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
105
- .tpl-card .tpl-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }
103
+ .tpl-card .tpl-icon { font-size: 40px; margin-bottom: 12px; }
104
+ .tpl-card .tpl-name { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
105
+ .tpl-card .tpl-desc { font-size: 18px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }
106
106
  .tpl-card .tpl-tags { display: flex; gap: 6px; flex-wrap: wrap; }
107
- .tpl-card .tpl-tag { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: var(--bg-hover); color: var(--text-dim); }
107
+ .tpl-card .tpl-tag { font-size: 18px; padding: 4px 10px; border-radius: 10px; background: var(--bg-hover); color: var(--text-dim); }
108
108
 
109
109
  /* Wizard */
110
110
  .wizard { max-width: 640px; margin: 0 auto; }
111
111
  .wizard-steps { display: flex; justify-content: center; gap: 8px; margin-bottom: 32px; }
112
- .wizard-step { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 13px; }
112
+ .wizard-step { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 18px; }
113
113
  .wizard-step.active { color: var(--accent); }
114
114
  .wizard-step.done { color: var(--green); }
115
115
  .wizard-step .step-num { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; border: 2px solid var(--border); }
@@ -299,13 +299,13 @@
299
299
  }
300
300
 
301
301
  /* Sidebar restructure */
302
- .sidebar-section-title { font-size: 11px; letter-spacing: 1px; color: var(--text-dim); margin: 20px 12px 8px; text-transform: uppercase; font-weight: 600; }
302
+ .sidebar-section-title { font-size: 18px; letter-spacing: 0.3px; color: var(--text-dim); margin: 24px 16px 10px; font-weight: 600; }
303
303
  .sidebar-divider { height: 1px; background: var(--border); margin: 8px 12px; }
304
304
  .pattern-card.active { border-color: var(--accent); box-shadow: var(--glow-sm); }
305
305
  .agent-list-container { overflow-y: auto; flex: 1; min-height: 0; }
306
306
  .agent-list-item {
307
307
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px;
308
- cursor: pointer; color: var(--text-muted); transition: all 0.2s ease; font-size: 14px; margin-bottom: 2px; position: relative;
308
+ cursor: pointer; color: var(--text-muted); transition: all 0.2s ease; font-size: 18px; margin-bottom: 2px; position: relative;
309
309
  }
310
310
  .agent-list-item:hover { background: var(--bg-hover); color: var(--text); transform: translateX(4px); }
311
311
  .agent-list-item.active { background: var(--accent-light); color: #fff; font-weight: 600; box-shadow: var(--glow-sm); border: 1px solid var(--border); }
@@ -1125,7 +1125,7 @@
1125
1125
 
1126
1126
  // === Init ===
1127
1127
  async function init() {
1128
- await Promise.all([loadTemplates(), loadAgents()]);
1128
+ await Promise.all([loadTemplates(), loadAgents(), loadSidebarAgents()]);
1129
1129
  loadSidebarGroups();
1130
1130
  handleRoute();
1131
1131
  window.addEventListener('popstate', handleRoute);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "opc-agent",
3
- "version": "4.0.37",
3
+ "version": "4.0.39",
4
4
  "description": "Open Agent Framework — Build, test, and run AI Agents for business workstations",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/studio-ui/index.html CHANGED
@@ -20,7 +20,7 @@
20
20
  --mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
21
21
  --radius: 14px; --radius-lg: 24px;
22
22
  }
23
- body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; font-size: 15px; line-height: 1.6; background-image: radial-gradient(ellipse at 20% 0%, rgba(139,92,246,0.12) 0%, transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(6,182,212,0.08) 0%, transparent 50%), url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30h60M30 0v60' stroke='rgba(139,92,246,0.04)' stroke-width='0.5'/%3E%3C/svg%3E"); }
23
+ body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; font-size: 18px; line-height: 1.6; background-image: radial-gradient(ellipse at 20% 0%, rgba(139,92,246,0.12) 0%, transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(6,182,212,0.08) 0%, transparent 50%), url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 30h60M30 0v60' stroke='rgba(139,92,246,0.04)' stroke-width='0.5'/%3E%3C/svg%3E"); }
24
24
  a { color: var(--accent); text-decoration: none; }
25
25
  button { font-family: var(--font); cursor: pointer; border: none; }
26
26
  input, select, textarea { font-family: var(--font); }
@@ -32,15 +32,15 @@
32
32
  padding: 24px 16px; display: flex; flex-direction: column; position: fixed; height: 100vh; z-index: 100;
33
33
  background-image: linear-gradient(180deg, rgba(139,92,246,0.05) 0%, transparent 30%);
34
34
  }
35
- .sidebar-logo { font-size: 22px; font-weight: 700; padding: 12px 12px; margin-bottom: 28px; display: flex; align-items: center; gap: 10px; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.5px; }
35
+ .sidebar-logo { font-size: 24px; font-weight: 700; padding: 12px 12px; margin-bottom: 28px; display: flex; align-items: center; gap: 10px; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.5px; }
36
36
  .sidebar-logo span { background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
37
37
  .nav-item {
38
38
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px;
39
- cursor: pointer; color: var(--text-muted); transition: all 0.2s ease; font-size: 15px; margin-bottom: 4px; position: relative;
39
+ cursor: pointer; color: var(--text-muted); transition: all 0.2s ease; font-size: 18px; margin-bottom: 4px; position: relative;
40
40
  }
41
41
  .nav-item:hover { background: var(--bg-hover); color: var(--text); transform: translateX(4px); }
42
42
  .nav-item.active { background: var(--accent-light); color: #fff; font-weight: 600; box-shadow: var(--glow-sm); border: 1px solid var(--border); }
43
- .nav-item .icon { width: 24px; text-align: center; font-size: 18px; }
43
+ .nav-item .icon { width: 28px; text-align: center; font-size: 22px; }
44
44
  .main { flex: 1; margin-left: 270px; min-height: 100vh; }
45
45
 
46
46
  /* Mobile */
@@ -58,9 +58,9 @@
58
58
  /* Page container */
59
59
  .page { display: none; padding: 32px; max-width: 1200px; margin: 0 auto; }
60
60
  .page.active { display: block; }
61
- .page-title { font-size: 28px; font-weight: 700; margin-bottom: 8px; background: var(--gradient); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 3s linear infinite; letter-spacing: -0.5px; }
61
+ .page-title { font-size: 32px; font-weight: 700; margin-bottom: 8px; background: var(--gradient); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 3s linear infinite; letter-spacing: -0.5px; }
62
62
  @keyframes shimmer { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
63
- .page-subtitle { color: var(--text-muted); font-size: 15px; margin-bottom: 24px; }
63
+ .page-subtitle { color: var(--text-muted); font-size: 18px; margin-bottom: 24px; }
64
64
 
65
65
  /* Cards */
66
66
  .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; transition: all 0.3s ease; backdrop-filter: blur(10px); box-shadow: var(--card-glow); position: relative; overflow: hidden; }
@@ -70,21 +70,21 @@
70
70
  .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
71
71
 
72
72
  /* Buttons */
73
- .btn { padding: 8px 20px; border-radius: 10px; font-size: 14px; font-weight: 500; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px; height: 38px; line-height: 20px; position: relative; overflow: hidden; }
73
+ .btn { padding: 10px 24px; border-radius: 10px; font-size: 18px; font-weight: 500; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px; height: 44px; line-height: 22px; position: relative; overflow: hidden; }
74
74
  .btn-primary { background: var(--gradient-btn); background-size: 200% auto; color: white; box-shadow: var(--glow-sm); }
75
75
  .btn-primary:hover { background-position: right center; transform: translateY(-2px); box-shadow: var(--glow); }
76
76
  .btn-secondary { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); backdrop-filter: blur(10px); }
77
77
  .btn-secondary:hover { border-color: var(--accent); box-shadow: var(--glow-sm); transform: translateY(-1px); }
78
78
  .btn-danger { background: rgba(239,68,68,0.1); color: var(--red); }
79
79
  .btn-danger:hover { background: rgba(239,68,68,0.2); }
80
- .btn-sm { padding: 6px 12px; font-size: 13px; height: 32px; }
81
- .btn-lg { padding: 14px 28px; font-size: 16px; height: 48px; }
80
+ .btn-sm { padding: 8px 16px; font-size: 18px; height: 38px; }
81
+ .btn-lg { padding: 16px 32px; font-size: 24px; height: 56px; }
82
82
 
83
83
  /* Form elements */
84
- .input { width: 100%; padding: 8px 14px; height: 40px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 15px; outline: none; transition: all 0.2s ease; backdrop-filter: blur(5px); }
84
+ .input { width: 100%; padding: 10px 16px; height: 48px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 18px; outline: none; transition: all 0.2s ease; backdrop-filter: blur(5px); }
85
85
  .input:focus { border-color: var(--accent); box-shadow: var(--glow-sm); }
86
86
  .input::placeholder { color: var(--text-dim); }
87
- .label { display: block; font-size: 13px; font-weight: 500; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
87
+ .label { display: block; font-size: 18px; font-weight: 500; color: var(--text-muted); margin-bottom: 8px; letter-spacing: 0.3px; }
88
88
  .form-group { margin-bottom: 20px; }
89
89
  select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23737373' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
90
90
 
@@ -94,22 +94,22 @@
94
94
  .search-bar::before { content: '🔍'; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; }
95
95
 
96
96
  /* Tags / Chips */
97
- .chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border); cursor: pointer; transition: all 0.15s; }
97
+ .chip { display: inline-block; padding: 4px 12px; border-radius: 10px; font-size: 18px; background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border); cursor: pointer; transition: all 0.15s; }
98
98
  .chip:hover, .chip.active { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
99
99
  .chip-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
100
100
 
101
101
  /* Template card */
102
102
  .tpl-card { cursor: pointer; }
103
- .tpl-card .tpl-icon { font-size: 32px; margin-bottom: 12px; }
104
- .tpl-card .tpl-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
105
- .tpl-card .tpl-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }
103
+ .tpl-card .tpl-icon { font-size: 40px; margin-bottom: 12px; }
104
+ .tpl-card .tpl-name { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
105
+ .tpl-card .tpl-desc { font-size: 18px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }
106
106
  .tpl-card .tpl-tags { display: flex; gap: 6px; flex-wrap: wrap; }
107
- .tpl-card .tpl-tag { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: var(--bg-hover); color: var(--text-dim); }
107
+ .tpl-card .tpl-tag { font-size: 18px; padding: 4px 10px; border-radius: 10px; background: var(--bg-hover); color: var(--text-dim); }
108
108
 
109
109
  /* Wizard */
110
110
  .wizard { max-width: 640px; margin: 0 auto; }
111
111
  .wizard-steps { display: flex; justify-content: center; gap: 8px; margin-bottom: 32px; }
112
- .wizard-step { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 13px; }
112
+ .wizard-step { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 18px; }
113
113
  .wizard-step.active { color: var(--accent); }
114
114
  .wizard-step.done { color: var(--green); }
115
115
  .wizard-step .step-num { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; border: 2px solid var(--border); }
@@ -299,13 +299,13 @@
299
299
  }
300
300
 
301
301
  /* Sidebar restructure */
302
- .sidebar-section-title { font-size: 11px; letter-spacing: 1px; color: var(--text-dim); margin: 20px 12px 8px; text-transform: uppercase; font-weight: 600; }
302
+ .sidebar-section-title { font-size: 18px; letter-spacing: 0.3px; color: var(--text-dim); margin: 24px 16px 10px; font-weight: 600; }
303
303
  .sidebar-divider { height: 1px; background: var(--border); margin: 8px 12px; }
304
304
  .pattern-card.active { border-color: var(--accent); box-shadow: var(--glow-sm); }
305
305
  .agent-list-container { overflow-y: auto; flex: 1; min-height: 0; }
306
306
  .agent-list-item {
307
307
  display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px;
308
- cursor: pointer; color: var(--text-muted); transition: all 0.2s ease; font-size: 14px; margin-bottom: 2px; position: relative;
308
+ cursor: pointer; color: var(--text-muted); transition: all 0.2s ease; font-size: 18px; margin-bottom: 2px; position: relative;
309
309
  }
310
310
  .agent-list-item:hover { background: var(--bg-hover); color: var(--text); transform: translateX(4px); }
311
311
  .agent-list-item.active { background: var(--accent-light); color: #fff; font-weight: 600; box-shadow: var(--glow-sm); border: 1px solid var(--border); }
@@ -1125,7 +1125,7 @@
1125
1125
 
1126
1126
  // === Init ===
1127
1127
  async function init() {
1128
- await Promise.all([loadTemplates(), loadAgents()]);
1128
+ await Promise.all([loadTemplates(), loadAgents(), loadSidebarAgents()]);
1129
1129
  loadSidebarGroups();
1130
1130
  handleRoute();
1131
1131
  window.addEventListener('popstate', handleRoute);