@dahawa/hawa-code 2.3.2 → 2.3.4

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.
@@ -3,7 +3,8 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Hawa Code - Agent Viewer</title>
6
+ <title>Hawa Code</title>
7
+ <link rel="icon" type="image/svg+xml" href="/logo.svg">
7
8
  <link rel="stylesheet" href="/style.css">
8
9
  </head>
9
10
  <body>
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1024 1024">
2
+ <path d="M331.946667 379.904c-11.946667 23.466667-11.946667 54.186667-11.946667 115.626667v32.938666c0 61.44 0 92.16 11.946667 115.626667 10.538667 20.650667 27.306667 37.418667 47.957333 47.957333 23.466667 11.946667 54.186667 11.946667 115.626667 11.946667h32.938666c61.44 0 92.16 0 115.626667-11.946667 20.650667-10.538667 37.418667-27.306667 47.957333-47.957333 11.946667-23.466667 11.946667-54.186667 11.946667-115.626667v-32.938666c0-61.44 0-92.16-11.946667-115.626667a109.696 109.696 0 0 0-47.957333-47.957333c-23.466667-11.946667-54.186667-11.946667-115.626667-11.946667h-32.938666c-61.44 0-92.16 0-115.626667 11.946667-20.650667 10.538667-37.418667 27.306667-47.957333 47.957333z" fill="currentColor"/>
3
+ </svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="2048" height="2048" viewBox="0 0 2048 2048"><defs><linearGradient id="a" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#2aa5f5"/><stop offset="100%" stop-color="#1977c8"/></linearGradient></defs><path fill="url(#a)" fill-rule="evenodd" d="m1019 121 780 439 5 918-789 444-774-445 5-917Zm-66 458-328 833 78 43 75-41 95-242h300l96 242 75 41 78-43-319-833H953Zm71 181-123 324h246l-123-324Z"/></svg>
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 1024 1024">
2
+ <path d="M705.536 433.664a38.4 38.4 0 1 1-54.272 54.272L550.4 387.114667V729.6a38.4 38.4 0 0 1-76.8 0V387.114667l-100.864 100.821333a38.4 38.4 0 1 1-54.272-54.272l166.4-166.4a38.4 38.4 0 0 1 54.272 0l166.4 166.4z" fill="currentColor"/>
3
+ </svg>
@@ -1,17 +1,17 @@
1
1
  /* terminal.css - 模拟 CLI 终端风格 */
2
2
  :root {
3
- --bg-primary: #1a1a2e;
4
- --bg-secondary: #16213e;
5
- --bg-hover: #1f2b45;
6
- --text-primary: #e0e0e0;
7
- --text-secondary: #b0b0b0;
3
+ --bg-primary: #0d0d0d;
4
+ --bg-secondary: #1a1a1a;
5
+ --bg-hover: #262626;
6
+ --text-primary: #e8e8e8;
7
+ --text-secondary: #a0a0a0;
8
8
  --text-dimmed: #666;
9
- --accent-blue: #4fc3f7;
10
- --accent-green: #81c784;
11
- --accent-yellow: #fff176;
12
- --accent-red: #ef5350;
13
- --accent-purple: #ce93d8;
14
- --border-color: #2a3a5e;
9
+ --accent-blue: #888;
10
+ --accent-green: #4caf50;
11
+ --accent-yellow: #ff9800;
12
+ --accent-red: #f44336;
13
+ --accent-purple: #9c27b0;
14
+ --border-color: #333;
15
15
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', 'Menlo', monospace;
16
16
  }
17
17
 
@@ -41,6 +41,67 @@ html, body {
41
41
  .app {
42
42
  height: 100%;
43
43
  display: flex;
44
+ flex-direction: row;
45
+ overflow: hidden;
46
+ }
47
+
48
+ /* 左侧边栏 */
49
+ .left-sidebar {
50
+ width: 220px;
51
+ flex-shrink: 0;
52
+ display: flex;
53
+ flex-direction: column;
54
+ background: var(--bg-secondary);
55
+ border-right: 1px solid var(--border-color);
56
+ overflow: hidden;
57
+ transition: width 0.2s ease;
58
+ }
59
+
60
+ .left-sidebar.collapsed {
61
+ width: 42px;
62
+ }
63
+
64
+ .sidebar-header {
65
+ display: flex;
66
+ align-items: center;
67
+ gap: 8px;
68
+ height: 40px;
69
+ padding: 8px 16px;
70
+ border-bottom: 1px solid var(--border-color);
71
+ flex-shrink: 0;
72
+ }
73
+
74
+ .left-sidebar.collapsed .sidebar-header {
75
+ justify-content: center;
76
+ padding: 8px 0;
77
+ }
78
+
79
+ .collapse-button {
80
+ background: transparent;
81
+ border: none;
82
+ color: var(--text-secondary);
83
+ font-size: 16px;
84
+ cursor: pointer;
85
+ padding: 4px;
86
+ line-height: 1;
87
+ transition: color 0.15s ease;
88
+ }
89
+
90
+ .collapse-button:hover {
91
+ color: var(--accent-blue);
92
+ }
93
+
94
+ .sidebar-title {
95
+ font-size: 14px;
96
+ font-weight: 600;
97
+ color: var(--accent-blue);
98
+ white-space: nowrap;
99
+ }
100
+
101
+ /* 右侧主内容区 */
102
+ .main-content {
103
+ flex: 1;
104
+ display: flex;
44
105
  flex-direction: column;
45
106
  overflow: hidden;
46
107
  }
@@ -50,6 +111,7 @@ html, body {
50
111
  display: flex;
51
112
  align-items: center;
52
113
  justify-content: space-between;
114
+ height: 40px;
53
115
  padding: 8px 16px;
54
116
  background: var(--bg-secondary);
55
117
  border-bottom: 1px solid var(--border-color);
@@ -103,17 +165,19 @@ html, body {
103
165
 
104
166
  /* Agent Tab 栏 */
105
167
  .agent-tabs {
168
+ flex: 1;
106
169
  display: flex;
170
+ flex-direction: column;
107
171
  gap: 2px;
108
- padding: 6px 16px;
109
- background: var(--bg-secondary);
110
- border-bottom: 1px solid var(--border-color);
111
- flex-shrink: 0;
112
- overflow-x: auto;
172
+ padding: 8px;
173
+ overflow-y: auto;
174
+ overflow-x: hidden;
113
175
  }
114
176
 
115
177
  .agent-tab {
116
- padding: 4px 12px;
178
+ display: flex;
179
+ align-items: center;
180
+ padding: 8px 12px;
117
181
  border-radius: 4px;
118
182
  cursor: pointer;
119
183
  font-size: 12px;
@@ -134,12 +198,22 @@ html, body {
134
198
  font-weight: 600;
135
199
  }
136
200
 
201
+ .agent-tab.collapsed {
202
+ justify-content: center;
203
+ padding: 8px 0;
204
+ }
205
+
137
206
  .agent-tab .tab-status {
138
207
  display: inline-block;
139
208
  width: 6px;
140
209
  height: 6px;
141
210
  border-radius: 50%;
142
211
  margin-right: 6px;
212
+ flex-shrink: 0;
213
+ }
214
+
215
+ .agent-tab.collapsed .tab-status {
216
+ margin-right: 0;
143
217
  }
144
218
 
145
219
  .agent-tab .tab-status.running {
@@ -154,6 +228,69 @@ html, body {
154
228
  background: var(--text-dimmed);
155
229
  }
156
230
 
231
+ /* 左侧底部 Settings 按钮 */
232
+ .sidebar-footer {
233
+ padding: 8px 16px;
234
+ flex-shrink: 0;
235
+ }
236
+
237
+ .left-sidebar.collapsed .sidebar-footer {
238
+ padding: 8px 0;
239
+ display: flex;
240
+ justify-content: center;
241
+ }
242
+
243
+ .sidebar-stats {
244
+ font-size: 11px;
245
+ color: var(--text-dimmed);
246
+ margin-bottom: 6px;
247
+ }
248
+
249
+ .left-sidebar.collapsed .sidebar-stats {
250
+ display: none;
251
+ }
252
+
253
+ .sidebar-button {
254
+ width: 100%;
255
+ display: inline-flex;
256
+ align-items: center;
257
+ gap: 8px;
258
+ background: transparent;
259
+ border: 1px solid var(--border-color);
260
+ color: var(--text-secondary);
261
+ padding: 8px 12px;
262
+ border-radius: 4px;
263
+ cursor: pointer;
264
+ font-family: var(--font-mono);
265
+ font-size: 12px;
266
+ text-align: left;
267
+ transition: all 0.15s ease;
268
+ }
269
+
270
+ .left-sidebar.collapsed .sidebar-button {
271
+ width: auto;
272
+ padding: 6px 8px;
273
+ justify-content: center;
274
+ }
275
+
276
+ .sidebar-button-icon {
277
+ flex-shrink: 0;
278
+ }
279
+
280
+ .sidebar-button-text {
281
+ white-space: nowrap;
282
+ }
283
+
284
+ .sidebar-button:hover {
285
+ background: var(--bg-hover);
286
+ color: var(--text-primary);
287
+ }
288
+
289
+ .sidebar-button.active {
290
+ border-color: var(--accent-blue);
291
+ color: var(--accent-blue);
292
+ }
293
+
157
294
  /* 消息列表 */
158
295
  .message-list {
159
296
  flex: 1;
@@ -1806,44 +1943,78 @@ html, body {
1806
1943
 
1807
1944
  .prompt-input-send {
1808
1945
  flex-shrink: 0;
1946
+ display: inline-flex;
1947
+ align-items: center;
1948
+ justify-content: center;
1949
+ width: 32px;
1950
+ height: 32px;
1809
1951
  background: transparent;
1810
- border: 1px solid var(--border-color);
1811
- color: var(--text-secondary);
1812
- padding: 6px 14px;
1813
- border-radius: 4px;
1952
+ border: 1px solid var(--accent-green);
1953
+ border-radius: 50%;
1814
1954
  cursor: pointer;
1815
- font-family: var(--font-mono);
1816
- font-size: 12px;
1817
1955
  transition: all 0.15s ease;
1818
1956
  }
1819
1957
 
1820
1958
  .prompt-input-send:hover:not(:disabled) {
1821
- background: var(--bg-hover);
1822
- color: var(--text-primary);
1823
- border-color: var(--accent-green);
1959
+ background: rgba(76, 175, 80, 0.15);
1824
1960
  }
1825
1961
 
1826
1962
  .prompt-input-send:disabled {
1827
1963
  opacity: 0.5;
1828
1964
  cursor: not-allowed;
1965
+ border-color: var(--border-color);
1966
+ }
1967
+
1968
+ .prompt-input-send:disabled .send-icon {
1969
+ background-color: var(--text-dimmed);
1970
+ }
1971
+
1972
+ .send-icon {
1973
+ display: inline-block;
1974
+ width: 18px;
1975
+ height: 18px;
1976
+ background-color: var(--accent-green);
1977
+ -webkit-mask-image: url('/send-icon.svg');
1978
+ mask-image: url('/send-icon.svg');
1979
+ -webkit-mask-size: contain;
1980
+ mask-size: contain;
1981
+ -webkit-mask-repeat: no-repeat;
1982
+ mask-repeat: no-repeat;
1983
+ -webkit-mask-position: center;
1984
+ mask-position: center;
1829
1985
  }
1830
1986
 
1831
1987
  .prompt-input-interrupt {
1832
1988
  flex-shrink: 0;
1989
+ display: inline-flex;
1990
+ align-items: center;
1991
+ justify-content: center;
1992
+ width: 32px;
1993
+ height: 32px;
1833
1994
  background: transparent;
1834
- border: 1px solid var(--border-color);
1835
- color: var(--accent-red);
1836
- padding: 6px 14px;
1837
- border-radius: 4px;
1995
+ border: 1px solid var(--accent-red);
1996
+ border-radius: 50%;
1838
1997
  cursor: pointer;
1839
- font-family: var(--font-mono);
1840
- font-size: 12px;
1841
1998
  transition: all 0.15s ease;
1842
1999
  }
1843
2000
 
1844
2001
  .prompt-input-interrupt:hover {
1845
- background: rgba(239, 83, 80, 0.1);
1846
- border-color: var(--accent-red);
2002
+ background: rgba(244, 67, 54, 0.15);
2003
+ }
2004
+
2005
+ .interrupt-icon {
2006
+ display: inline-block;
2007
+ width: 18px;
2008
+ height: 18px;
2009
+ background-color: var(--accent-red);
2010
+ -webkit-mask-image: url('/interrupt-icon.svg');
2011
+ mask-image: url('/interrupt-icon.svg');
2012
+ -webkit-mask-size: contain;
2013
+ mask-size: contain;
2014
+ -webkit-mask-repeat: no-repeat;
2015
+ mask-repeat: no-repeat;
2016
+ -webkit-mask-position: center;
2017
+ mask-position: center;
1847
2018
  }
1848
2019
 
1849
2020
  .prompt-input-status {