@chrysb/alphaclaw 0.8.2 → 0.8.3-beta.0

package/README.md

@@ -175,6 +175,7 @@ If you need OpenClaw's full security posture (manual pairing codes, no query-str
 
 ```bash
 npm install
+npm run build:ui        # Generate Setup UI bundle, Tailwind CSS, and vendor CSS (required for local runs from a git checkout)
 npm test                # Full suite (440 tests)
 npm run test:watchdog   # Watchdog-focused suite (14 tests)
 npm run test:watch      # Watch mode

package/lib/public/css/chat.css

@@ -0,0 +1,426 @@
+/* ── Chat route ──────────────────────────────── */
+
+.app-content-pane.chat-pane {
+  padding: 0;
+}
+
+.chat-route-shell {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  height: 100%;
+}
+
+.chat-route-header {
+  padding: 16px 24px 10px;
+  border-bottom: 1px solid var(--border);
+}
+
+.chat-route-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text);
+}
+
+.chat-route-subtitle {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.chat-route-warning {
+  margin-top: 8px;
+  font-size: 12px;
+  color: #fca5a5;
+}
+
+.chat-thread {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 16px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.chat-empty-state {
+  color: var(--text-dim);
+  font-size: 12px;
+  text-align: center;
+  margin-top: 24px;
+}
+
+.chat-bubble {
+  max-width: 86%;
+  border-radius: 10px;
+  border: 1px solid var(--panel-border-contrast);
+  background: rgba(255, 255, 255, 0.02);
+  padding: 12px 14px;
+}
+
+.chat-bubble.is-user {
+  align-self: flex-end;
+  background: rgba(99, 235, 255, 0.06);
+  border-color: rgba(99, 235, 255, 0.24);
+}
+
+.chat-bubble.is-assistant {
+  align-self: flex-start;
+}
+
+.chat-bubble-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 8px;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.chat-bubble-content {
+  margin: 0;
+  font-family: inherit;
+  font-size: 12px;
+  color: var(--text);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.chat-bubble-markdown > :first-child {
+  margin-top: 0;
+}
+
+.chat-bubble-markdown > :last-child {
+  margin-bottom: 0;
+}
+
+.chat-bubble-markdown {
+  white-space: normal;
+}
+
+.chat-bubble-markdown p,
+.chat-bubble-markdown ul,
+.chat-bubble-markdown ol,
+.chat-bubble-markdown pre,
+.chat-bubble-markdown blockquote {
+  margin: 8px 0;
+}
+
+.chat-bubble-markdown ul,
+.chat-bubble-markdown ol {
+  padding-left: 18px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.chat-bubble-markdown ul {
+  list-style: disc;
+}
+
+.chat-bubble-markdown ol {
+  list-style: decimal;
+}
+
+.chat-bubble-markdown li > p {
+  margin: 0;
+}
+
+.chat-bubble-markdown li + li {
+  margin-top: 4px;
+}
+
+.chat-bubble-markdown > * + * {
+  margin-top: 8px;
+}
+
+.chat-bubble-markdown h1,
+.chat-bubble-markdown h2,
+.chat-bubble-markdown h3,
+.chat-bubble-markdown h4 {
+  margin: 0;
+  line-height: 1.25;
+}
+
+.chat-bubble-markdown h1 {
+  font-size: 16px;
+}
+
+.chat-bubble-markdown h2 {
+  font-size: 14px;
+}
+
+.chat-bubble-markdown h3,
+.chat-bubble-markdown h4 {
+  font-size: 13px;
+}
+
+.chat-bubble-markdown h1 + *,
+.chat-bubble-markdown h2 + *,
+.chat-bubble-markdown h3 + *,
+.chat-bubble-markdown h4 + * {
+  margin-top: 10px;
+}
+
+.chat-bubble-markdown code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+  font-size: 11px;
+  background: rgba(255, 255, 255, 0.06);
+  padding: 1px 4px;
+  border-radius: 4px;
+}
+
+.chat-bubble-markdown pre code {
+  display: block;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  padding: 8px;
+}
+
+.chat-bubble-json {
+  white-space: pre-wrap;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+  font-size: 11px;
+  line-height: 1.6;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--panel-border-contrast);
+  border-radius: 8px;
+  padding: 10px;
+}
+
+.chat-message-json {
+  margin-top: 10px;
+  border-top: 1px dashed var(--border);
+  padding-top: 8px;
+}
+
+.chat-message-json summary {
+  cursor: pointer;
+  color: var(--text-muted);
+  font-size: 11px;
+}
+
+.chat-message-json pre {
+  margin: 8px 0 0;
+  font-size: 11px;
+  line-height: 1.45;
+  color: var(--text-muted);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.chat-tool-call-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 6px;
+}
+
+.chat-tool-call-row {
+  border: 1px dashed var(--border);
+  border-radius: 8px;
+  padding: 6px 8px;
+}
+
+.chat-tool-call-row summary {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.chat-tool-call-name {
+  color: var(--text);
+  font-size: 12px;
+}
+
+.chat-tool-call-status {
+  color: var(--text-muted);
+  font-size: 10px;
+  text-transform: lowercase;
+}
+
+.chat-tool-inline {
+  font-weight: 600;
+}
+
+.chat-tool-inline-message {
+  margin: 0;
+}
+
+.chat-tool-inline-message summary {
+  cursor: pointer;
+  list-style: none;
+  color: var(--text);
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.chat-tool-inline-message summary::-webkit-details-marker {
+  display: none;
+}
+
+.chat-tool-inline-message summary::before {
+  content: "▸";
+  color: var(--text-muted);
+  font-size: 12px;
+  line-height: 1;
+  margin-right: 2px;
+}
+
+.chat-tool-inline-message[open] summary::before {
+  content: "▾";
+}
+
+.chat-tool-inline-icon {
+  font-size: 12px;
+  line-height: 1;
+}
+
+.chat-tool-inline-title {
+  font-weight: 600;
+}
+
+.chat-tool-inline-time {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.chat-tool-inline-body {
+  margin-top: 8px;
+}
+
+.chat-tool-inline-label {
+  margin-top: 8px;
+  margin-bottom: 4px;
+  font-size: 11px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.chat-tool-inline-body pre {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.45;
+  color: var(--text-muted);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.chat-typing-indicator {
+  min-width: 170px;
+}
+
+.chat-typing-dots {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 0 1px;
+}
+
+.chat-typing-dots span {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--text-muted);
+  opacity: 0.45;
+  animation: chatTypingPulse 1.2s infinite ease-in-out;
+}
+
+.chat-typing-dots span:nth-child(2) {
+  animation-delay: 0.15s;
+}
+
+.chat-typing-dots span:nth-child(3) {
+  animation-delay: 0.3s;
+}
+
+@keyframes chatTypingPulse {
+  0%,
+  80%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.35;
+  }
+  40% {
+    transform: translateY(-2px);
+    opacity: 0.9;
+  }
+}
+
+.chat-composer {
+  border-top: 1px solid var(--border);
+  padding: 12px 24px 16px;
+  display: flex;
+  align-items: flex-end;
+  gap: 10px;
+}
+
+.chat-composer-input {
+  flex: 1;
+  min-height: 68px;
+  max-height: 180px;
+  border-radius: 10px;
+  resize: vertical;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 1.4;
+  padding: 10px;
+}
+
+.chat-composer-send {
+  white-space: nowrap;
+  padding: 8px 14px;
+  border-radius: 9px;
+  font-family: inherit;
+  font-size: 12px;
+}
+
+.chat-composer-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.chat-composer-stop {
+  white-space: nowrap;
+  padding: 8px 12px;
+  border-radius: 9px;
+  font-family: inherit;
+  font-size: 12px;
+}
+
+.chat-raw-debug {
+  margin-top: 8px;
+  border-top: 1px dashed var(--border);
+  padding-top: 8px;
+}
+
+.chat-raw-debug summary {
+  cursor: pointer;
+  color: var(--text-muted);
+  font-size: 11px;
+}
+
+.chat-raw-debug pre {
+  margin: 8px 0 0;
+  font-size: 11px;
+  color: var(--text-muted);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}

package/lib/public/css/explorer.css

@@ -210,6 +210,107 @@
   margin-top: 8px;
 }
 
+/* ── Sidebar chat sessions ───────────────────── */
+
+.sidebar-chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 12px 16px 4px;
+}
+
+.sidebar-chat-label {
+  padding: 0;
+}
+
+.sidebar-chat-new-button {
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  font: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  padding: 6px;
+  margin: -6px;
+  cursor: pointer;
+  opacity: 0.9;
+  transition: color 0.1s, opacity 0.1s;
+}
+
+.sidebar-chat-new-icon {
+  width: 16px;
+  height: 16px;
+  display: block;
+}
+
+.sidebar-chat-new-button:hover {
+  color: var(--text);
+  opacity: 1;
+}
+
+.sidebar-chat-sessions-list {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 2px 0 8px;
+}
+
+.sidebar-chat-session-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 16px 6px 24px;
+  color: var(--text-muted);
+  font-size: 13px;
+  line-height: 1.4;
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s;
+  position: relative;
+  user-select: none;
+  border: none;
+  background: transparent;
+  width: 100%;
+  text-align: left;
+  font-family: inherit;
+}
+
+.sidebar-chat-session-item:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+
+.sidebar-chat-session-item.active {
+  background: var(--bg-active);
+  color: var(--accent);
+}
+
+.sidebar-chat-session-item.active::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: var(--accent);
+}
+
+.sidebar-chat-session-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sidebar-chat-empty {
+  padding: 10px 16px 10px 24px;
+  color: var(--text-dim);
+  font-size: 12px;
+}
+
 .file-tree-wrap {
   width: 100%;
   display: flex;