@dahawa/hawa-code 1.38.2 → 1.38.4

package/webServer/style.css

@@ -459,3 +459,240 @@ html, body {
 .auto-scroll-toggle:hover {
   background: var(--bg-hover);
 }
+
+/* ============================================
+   Tool 结构化渲染样式
+   ============================================ */
+
+/* tool_use 详情区域 */
+.tool-use-detail {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 6px;
+  font-size: 12px;
+}
+
+.tool-badge {
+  display: inline-block;
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #000;
+  background: var(--accent-purple);
+}
+
+.file-path {
+  color: var(--accent-blue);
+  word-break: break-all;
+}
+
+.tool-meta {
+  color: var(--text-dimmed);
+  font-size: 11px;
+}
+
+.tool-description {
+  color: var(--text-secondary);
+  font-size: 12px;
+}
+
+.pattern-text {
+  background: rgba(0, 0, 0, 0.3);
+  padding: 1px 4px;
+  border-radius: 3px;
+  color: var(--accent-yellow);
+  font-size: 12px;
+}
+
+/* 命令块 (Bash) */
+.command-block {
+  background: rgba(0, 0, 0, 0.3);
+  padding: 4px 8px;
+  border-radius: 4px;
+  margin-top: 4px;
+  width: 100%;
+  overflow-x: auto;
+  font-size: 12px;
+  color: var(--text-primary);
+}
+
+.command-block code {
+  background: none;
+  padding: 0;
+}
+
+/* Diff 内联预览 (Edit tool_use) */
+.diff-preview-inline {
+  width: 100%;
+  margin-top: 4px;
+  font-size: 11px;
+  overflow-x: auto;
+}
+
+/* tool_result 详情区域 */
+.tool-result-detail {
+  font-size: 12px;
+}
+
+.result-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.result-status {
+  font-weight: 600;
+  font-size: 11px;
+}
+
+.result-status.status-success {
+  color: var(--accent-green);
+}
+
+.result-status.status-error {
+  color: var(--accent-red);
+}
+
+.result-status.status-warn {
+  color: var(--accent-yellow);
+}
+
+.result-status.status-info {
+  color: var(--accent-blue);
+}
+
+/* 代码块 */
+.code-block {
+  background: rgba(0, 0, 0, 0.3);
+  padding: 6px 8px;
+  border-radius: 4px;
+  margin-top: 4px;
+  max-height: 400px;
+  overflow: auto;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.code-block code {
+  background: none;
+  padding: 0;
+}
+
+/* stderr 块 */
+.stderr-block {
+  border-left: 2px solid var(--accent-red);
+  color: var(--accent-red);
+}
+
+/* 文件列表 */
+.file-list {
+  list-style: none;
+  padding: 0;
+  margin: 4px 0 0 0;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.file-item {
+  padding: 1px 0;
+  color: var(--accent-blue);
+  font-size: 12px;
+}
+
+.file-item::before {
+  content: '  ';
+}
+
+/* 展开/收起 */
+.expand-toggle {
+  color: var(--text-dimmed);
+  font-size: 11px;
+  cursor: pointer;
+  padding: 2px 0;
+  margin-top: 2px;
+}
+
+.expand-toggle:hover {
+  color: var(--accent-blue);
+}
+
+/* Diff 视图 */
+.diff-view {
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  margin-top: 4px;
+  padding: 4px 0;
+  overflow-x: auto;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.diff-line {
+  display: flex;
+  padding: 0 8px;
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-family: var(--font-mono);
+}
+
+.diff-line-no {
+  display: inline-block;
+  text-align: right;
+  color: var(--text-dimmed);
+  user-select: none;
+  flex-shrink: 0;
+  padding-right: 4px;
+}
+
+.diff-code {
+  flex: 1;
+  min-width: 0;
+}
+
+.diff-add {
+  color: var(--accent-green);
+  background: rgba(129, 199, 132, 0.1);
+}
+
+.diff-remove {
+  color: var(--accent-red);
+  background: rgba(239, 83, 80, 0.1);
+}
+
+.diff-context {
+  color: var(--text-dimmed);
+}
+
+.diff-separator {
+  color: var(--text-dimmed);
+}
+
+.diff-empty {
+  color: var(--text-dimmed);
+  font-size: 11px;
+  font-style: italic;
+}
+
+/* 远程工具 ☁ 标识（与 CLI 端 userFacingName "☁ Read" 一致） */
+.message-tool-use.remote .tool-badge::before,
+.message-tool-use.remote .tool-name::before {
+  content: '☁ ';
+}
+
+.message-tool-result.remote .result-header::before {
+  content: '☁ ';
+  color: var(--text-dimmed);
+  font-size: 11px;
+}
+
+/* tool_result 纯文本降级 */
+.tool-result-text {
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-size: 12px;
+  color: var(--text-secondary);
+}