@webless/agent 0.6.4 → 0.6.6

package/dist/embed.css

@@ -362,51 +362,55 @@ html.webless-agent-page-shift {
   content: "!";
 }
 .agent-activity-bubble__details {
-  overflow: hidden;
-  border: 1px solid var(--as-border);
-  border-radius: var(--as-radius-md);
-  background: var(--as-surface);
+  border: 0;
+  background: transparent;
 }
 .agent-activity-bubble__summary {
   appearance: none;
   display: flex;
-  width: 100%;
-  min-height: 38px;
+  width: fit-content;
+  min-height: 32px;
   align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  margin: 0;
-  padding: 7px 12px;
+  gap: 8px;
+  margin: 0 0 0 -6px;
+  padding: 4px 6px;
   border: 0;
+  border-radius: 8px;
   background: transparent;
-  color: var(--as-text);
+  color: var(--as-text-muted);
   cursor: pointer;
   font-family: inherit;
-  font-size: 12.5px;
+  font-size: 12px;
+  font-weight: 650;
   text-align: left;
 }
-.agent-activity-bubble__summary-title {
-  font-weight: 700;
-}
-.agent-activity-bubble__summary-toggle {
-  flex: 0 0 auto;
-  color: var(--as-text-muted);
-  font-size: 12px;
-  font-weight: 600;
+.agent-activity-bubble__summary::before {
+  width: 6px;
+  height: 6px;
+  flex: 0 0 6px;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  color: var(--as-text-subtle);
+  content: "";
+  transform: rotate(45deg) translate(-1px, -1px);
+  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
 }
-.agent-activity-bubble__summary:hover .agent-activity-bubble__summary-toggle {
-  color: var(--as-brand);
+.agent-activity-bubble__summary:hover {
+  background: var(--as-surface-muted);
+  color: var(--as-text);
 }
 .agent-activity-bubble__summary:focus-visible {
   outline: 2px solid var(--as-brand);
-  outline-offset: -2px;
+  outline-offset: 2px;
+}
+.agent-activity-bubble__summary[aria-expanded=true]::before {
+  transform: rotate(225deg) translate(-1px, -1px);
 }
 .agent-activity-bubble__steps {
   display: grid;
   gap: 0;
   margin: 0;
-  padding: 6px 12px 12px;
-  border-top: 1px solid var(--as-border);
+  padding: 4px 0 2px 18px;
   list-style: none;
 }
 .agent-activity-bubble__step {
@@ -423,7 +427,7 @@ html.webless-agent-page-shift {
   top: 29px;
   bottom: -9px;
   left: 8px;
-  width: 2px;
+  width: 1px;
   background: color-mix(in srgb, var(--as-text) 10%, transparent);
   content: "";
 }
@@ -533,6 +537,9 @@ html.webless-agent-page-shift {
   .agent-activity-bubble__step[data-state=active] .agent-activity-bubble__step-icon {
     animation: none;
   }
+  .agent-activity-bubble__summary::before {
+    transition: none;
+  }
 }
 
 /* src/react/components/Composer/Composer.css */
@@ -1169,11 +1176,11 @@ html.webless-agent-page-shift {
 }
 .message-bubble--agent .message-bubble__text {
   min-width: 0;
-  width: 100%;
-  padding: 12px 14px;
-  border: 1px solid var(--as-border);
-  border-radius: var(--as-radius-lg);
-  background: var(--as-surface);
+  width: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
   color: var(--as-text);
 }
 .message-bubble__sources {
@@ -1326,6 +1333,198 @@ html.webless-agent-page-shift {
   }
 }
 
+/* src/react/components/ToolInputCard/ToolInputCard.css */
+.tool-input-card {
+  box-sizing: border-box;
+  display: grid;
+  gap: 12px;
+  width: min(100%, 360px);
+  padding: 16px;
+  border: 1px solid var(--as-border);
+  border-radius: var(--as-radius-md);
+  background: var(--as-surface);
+  color: var(--as-text);
+  box-shadow: 0 8px 24px color-mix(in srgb, var(--as-text) 5%, transparent);
+}
+.tool-input-card__heading {
+  display: grid;
+  gap: 4px;
+}
+.tool-input-card__heading strong {
+  font-family: var(--as-font-display);
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.35;
+}
+.tool-input-card__heading p {
+  max-width: 42ch;
+  margin: 0;
+  color: var(--as-text-muted);
+  font-size: 0.875rem;
+  line-height: 1.45;
+}
+.tool-input-card form,
+.tool-input-card__fields,
+.tool-input-card__field {
+  display: grid;
+}
+.tool-input-card form {
+  gap: 16px;
+}
+.tool-input-card__fields {
+  gap: 12px;
+}
+.tool-input-card__field {
+  gap: 6px;
+}
+.tool-input-card__field > label,
+.tool-input-card__field > [id$=-label] {
+  font-size: 0.8125rem;
+  font-weight: 700;
+  line-height: 1.35;
+}
+.tool-input-card__description {
+  color: var(--as-text-muted);
+  font-size: 0.75rem;
+  line-height: 1.4;
+}
+.tool-input-card input:not([type=checkbox]):not([type=radio]),
+.tool-input-card select,
+.tool-input-card textarea {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  min-height: 44px;
+  padding: 10px 12px;
+  border: 1px solid var(--as-control-border);
+  border-radius: 10px;
+  background: var(--as-surface);
+  color: var(--as-text);
+  font: inherit;
+  font-size: 1rem;
+  line-height: 1.4;
+}
+.tool-input-card textarea {
+  resize: vertical;
+}
+.tool-input-card input::placeholder,
+.tool-input-card textarea::placeholder {
+  color: var(--as-text-subtle);
+}
+.tool-input-card__choices {
+  display: grid;
+  gap: 4px;
+}
+.tool-input-card__choice,
+.tool-input-card__check {
+  display: flex;
+  min-height: 44px;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border: 1px solid var(--as-control-border);
+  border-radius: 10px;
+  background: var(--as-surface);
+  cursor: pointer;
+  font-size: 0.875rem;
+  line-height: 1.35;
+}
+.tool-input-card__choice:has(input:checked),
+.tool-input-card__check:has(input:checked) {
+  border-color: color-mix(in srgb, var(--as-brand) 54%, var(--as-border));
+  background: color-mix(in srgb, var(--as-brand-soft) 48%, var(--as-surface));
+}
+.tool-input-card__choice input,
+.tool-input-card__check input {
+  width: 18px;
+  height: 18px;
+  margin: 0;
+  flex: 0 0 auto;
+  accent-color: var(--as-brand);
+}
+.tool-input-card__check > span {
+  display: grid;
+  gap: 2px;
+}
+.tool-input-card__check strong {
+  font-size: 0.875rem;
+}
+.tool-input-card__check span span {
+  color: var(--as-text-muted);
+  font-size: 0.75rem;
+}
+.tool-input-card__range {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+}
+.tool-input-card__range output {
+  min-width: 3ch;
+  color: var(--as-text-muted);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+.tool-input-card__error {
+  color: var(--as-danger);
+  font-size: 0.75rem;
+  line-height: 1.4;
+}
+.tool-input-card__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.tool-input-card__actions button {
+  min-height: 44px;
+  padding: 10px 16px;
+  border: 1px solid var(--as-brand);
+  border-radius: 10px;
+  background: var(--as-brand);
+  color: var(--as-on-brand);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+.tool-input-card__actions .tool-input-card__secondary {
+  border-color: var(--as-control-border);
+  background: var(--as-surface);
+  color: var(--as-text);
+}
+.tool-input-card :is(input, select, textarea, button):focus-visible {
+  outline: 2px solid var(--as-brand);
+  outline-offset: 2px;
+}
+.tool-input-card :is(input, select, textarea, button):disabled {
+  cursor: default;
+  opacity: 0.55;
+}
+.tool-input-card--submitted {
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  padding-block: 12px;
+  color: var(--as-success);
+  box-shadow: none;
+}
+.tool-input-card--submitted strong {
+  color: var(--as-text);
+  font-size: 0.875rem;
+}
+@media (max-width: 520px), (pointer: coarse) {
+  .tool-input-card {
+    width: 100%;
+  }
+  .tool-input-card__actions {
+    display: grid;
+    justify-content: stretch;
+  }
+  .tool-input-card__actions button {
+    width: 100%;
+  }
+}
+
 /* src/react/components/HumanInputCard/HumanInputCard.css */
 .human-input-card {
   display: grid;