Avatar: Ctrl+V paste + serverseitige Skalierung auf max 256px; Tool-Boxes: Diff-View für edit/write_file, Foldout für alle Tools, stop_reason im Chat; ImageSharp 3.1.12

wwwroot/css/chat.css

@@ -12,11 +12,6 @@
   display: none;
 }
 
-.custom-cmd-btn {
-  padding: var(--s1) var(--s2);
-  line-height: 1;
-}
-
 .custom-cmd-btn:hover {
   background: var(--f3-bg);
   border-color: var(--f3-border);
@@ -24,7 +19,6 @@
 
 .custom-cmd-btn.running {
   opacity: var(--semi-transparent);
-  cursor: wait;
 }
 
 /* Header Menu */
@@ -34,11 +28,6 @@
   margin-left: auto;
 }
 
-.header-menu-trigger {
-  padding: var(--s1) var(--s2);
-  line-height: 1;
-}
-
 .header-menu-dropdown {
   position: absolute;
   top: 100%;
@@ -128,12 +117,94 @@
 }
 
 .tool-box {
-  padding: var(--s2);
+  align-self: flex-start;
   background: var(--f1-bg);
   border: var(--border-width) solid var(--f1-border);
+  padding: var(--s3);
+}
+
+.tool-box:has(.tool-box-header) {
+  padding: 0;
+}
+
+.tool-box:has([hidden]) {
   opacity: var(--semi-transparent);
 }
 
+.tool-box-header {
+  display: flex;
+  align-items: center;
+  gap: var(--s2);
+  padding: var(--s3);
+  flex-wrap: wrap;
+}
+
+.tool-error-badge {
+  color: #ff6b6b;
+  border: var(--border-width) solid #ff6b6b;
+  padding: 0 var(--s1);
+}
+
+/* Diff View */
+
+.tool-diff {
+  font-family: monospace;
+  max-height: 16.5em;
+  overflow: auto;
+}
+
+.diff-line {
+  display: flex;
+  align-items: flex-start;
+  white-space: pre;
+}
+
+.diff-removed {
+  color: #f33;
+  background: #f331
+}
+
+.diff-added {
+  color: #3f3;
+  background-color: #3f31;
+}
+
+.diff-marker {
+  flex-shrink: 0;
+  width: 1.5em;
+  text-align: center;
+  user-select: none;
+  border-right: var(--border-width) solid var(--f2-border);
+  margin-right: var(--s2);
+}
+
+.diff-content {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: var(--s2);
+}
+
+.diff-more {
+  padding: var(--s1) var(--s2);
+  opacity: var(--semi-transparent);
+  font-family: monospace;
+}
+
+.tool-result {
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: monospace;
+  padding: var(--s4);
+  max-height: 16em;
+  overflow: auto;
+}
+
+.tool-write-meta {
+  opacity: var(--semi-transparent);
+  margin-left: auto;
+}
+
 .input-area {
   border-top: var(--border-width) solid var(--f1-border);
   display: flex;