next-ai-editor 0.2.6 → 1.0.0

package/dist/next-ai-editor.css

@@ -358,20 +358,54 @@
   align-items: center;
   justify-content: space-between;
   padding: 8px 4px;
-  cursor: pointer;
   user-select: none;
   flex-shrink: 0;
+  gap: 8px;
+}
+
+.chat-panel-messages-header-left {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  cursor: pointer;
   border-radius: 8px;
+  padding: 0 4px;
 }
 
-.chat-panel-messages-header:hover {
+.chat-panel-messages-header-left:hover {
   background: rgba(0, 0, 0, 0.1);
 }
 
-.chat-panel.light .chat-panel-messages-header:hover {
+.chat-panel.light .chat-panel-messages-header-left:hover {
   background: rgba(0, 0, 0, 0.05);
 }
 
+.chat-panel-clear-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  color: #71717a;
+  cursor: pointer;
+  transition: all 0.15s;
+  flex-shrink: 0;
+}
+
+.chat-panel-clear-button:hover {
+  background: rgba(239, 68, 68, 0.15);
+  color: #ef4444;
+}
+
+.chat-panel.light .chat-panel-clear-button:hover {
+  background: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+}
+
 .chat-panel-messages-title {
   font-size: 12px;
   font-weight: 600;
@@ -500,58 +534,6 @@
   box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
 }
 
-/* Context indicator (inline preview above input) */
-.context-indicator {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 8px 12px;
-  margin-bottom: 8px;
-  background: rgba(99, 102, 241, 0.1);
-  border: 1px solid rgba(99, 102, 241, 0.3);
-  border-radius: 8px;
-  font-size: 12px;
-  color: #a5b4fc;
-  animation: contextAppear 0.2s ease-out;
-}
-
-@keyframes contextAppear {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.context-text {
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.context-clear {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  color: #a5b4fc;
-  cursor: pointer;
-  padding: 2px;
-  border-radius: 4px;
-  transition: all 0.15s;
-}
-
-.context-clear:hover {
-  background: rgba(99, 102, 241, 0.2);
-  color: #ffffff;
-}
-
 /* Input row */
 .input-row {
   display: flex;
@@ -559,11 +541,6 @@
   align-items: flex-end;
 }
 
-.input-wrapper {
-  position: relative;
-  flex: 1;
-}
-
 .context-pills-container {
   display: flex;
   flex-wrap: wrap;
@@ -683,11 +660,13 @@
   background: linear-gradient(135deg, #71717a, #52525b);
 }
 
-.input-hint {
-  margin-top: 8px;
-  font-size: 11px;
-  color: #71717a;
-  text-align: center;
+/* Empty chat panel state */
+.chat-panel-empty-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
 }
 
 /* Message List Empty State */
@@ -695,13 +674,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 100%;
-  min-height: 200px;
+  width: 100%;
 }
 
 .empty-state {
   text-align: center;
   color: #71717a;
+  padding: 20px;
 }
 
 .empty-icon {
@@ -745,100 +724,498 @@
 }
 
 .message-content {
-  background: #3f3f46;
   padding: 10px 14px;
   border-radius: 12px;
   font-size: 14px;
   line-height: 1.5;
-  color: #ffffff;
   max-width: 85%;
   white-space: pre-wrap;
   word-wrap: break-word;
 }
 
-.chat-panel.light .message-content {
-  background: #3f3f46;
+.message-user .message-content {
+  background: #6366f1;
   color: #ffffff;
 }
 
-.message-user .message-content {
-  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+.chat-panel.light .message-user .message-content {
+  background: #818cf8;
   color: #ffffff;
 }
 
 .message-assistant .message-content {
-  background: #3f3f46;
-  color: #ffffff;
+  background: #27272a;
+  color: #e4e4e7;
 }
 
 .chat-panel.light .message-assistant .message-content {
-  background: #3f3f46;
-  color: #ffffff;
+  background: #f4f4f5;
+  color: #27272a;
 }
 
-/* Tool messages */
-.message-tool {
+/* Task block - user message as header + agent steps */
+.task-block {
   display: flex;
-  align-items: center;
+  flex-direction: column;
   gap: 8px;
-  padding: 8px 12px;
-  background: rgba(168, 85, 247, 0.1);
-  border-radius: 8px;
-  font-size: 12px;
-  color: #c4b5fd;
+  padding: 12px;
+  background: rgba(30, 30, 46, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  margin-bottom: 12px;
 }
 
-.tool-icon {
-  font-size: 14px;
+.chat-panel.light .task-block {
+  background: rgba(255, 255, 255, 0.8);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+.task-block-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.tool-name {
+.chat-panel.light .task-block-header {
+  border-bottom-color: rgba(0, 0, 0, 0.1);
+}
+
+.task-block-title {
+  flex: 1;
+  font-size: 14px;
   font-weight: 500;
   color: #e4e4e7;
+  line-height: 1.5;
+}
+
+.chat-panel.light .task-block-title {
+  color: #18181b;
+}
+
+.task-block-title p {
+  margin: 0;
+}
+
+.task-block-undo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: rgba(255, 255, 255, 0.08);
+  border-radius: 6px;
+  color: #a1a1aa;
+  cursor: pointer;
+  transition: all 0.15s;
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.task-block-undo:hover {
+  background: rgba(239, 68, 68, 0.2);
+  color: #ef4444;
 }
 
-.tool-description {
+.chat-panel.light .task-block-undo {
+  background: rgba(0, 0, 0, 0.05);
   color: #71717a;
-  font-size: 11px;
 }
 
-/* Streaming indicator */
-.message-streaming {
-  opacity: 0.7;
+.chat-panel.light .task-block-undo:hover {
+  background: rgba(239, 68, 68, 0.15);
+  color: #ef4444;
 }
 
-.streaming-indicator {
+.task-block-steps {
   display: flex;
-  gap: 4px;
-  padding: 4px 0;
+  flex-direction: column;
+  gap: 2px;
 }
 
-.streaming-indicator .dot {
-  width: 6px;
-  height: 6px;
-  background: #6366f1;
+/* Task group - groups consecutive tool/status messages */
+.task-group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 0;
+}
+
+.task-step {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 12px;
+  font-size: 13px;
+  color: #a1a1aa;
+  transition: opacity 0.2s;
+}
+
+/* Main status messages - section headers */
+.task-step.status {
+  font-size: 14px;
+  font-weight: 600;
+  color: #e4e4e7;
+  padding: 12px 12px 8px 12px;
+  margin-top: 8px;
+}
+
+.task-step.status:first-child {
+  margin-top: 0;
+}
+
+.task-step.status .task-step-indicator {
+  width: 16px;
+  height: 16px;
+}
+
+.task-step.status .task-checkmark {
+  font-size: 13px;
+  color: #10b981;
+}
+
+.task-step.status .task-spinner {
+  width: 12px;
+  height: 12px;
+  border-width: 2px;
+  border-color: #6366f1 transparent transparent transparent;
+}
+
+/* Subtasks (tool calls) - compact and inline */
+.task-step.tool {
+  padding: 3px 12px 3px 38px;
+  font-size: 12px;
+  color: #71717a;
+  opacity: 0.9;
+}
+
+.task-step.tool .task-step-indicator {
+  width: 12px;
+  height: 12px;
+}
+
+.task-step.tool .task-checkmark {
+  font-size: 10px;
+  color: #6b7280;
+}
+
+.task-step.tool .task-spinner {
+  width: 10px;
+  height: 10px;
+  border-width: 1.5px;
+  border-color: #71717a transparent transparent transparent;
+}
+
+.task-step-target {
+  font-family: ui-monospace, monospace;
+  color: #e4e4e7;
+  font-weight: 500;
+}
+
+.chat-panel.light .task-step-target {
+  color: #18181b;
+}
+
+/* Completion messages - prominent */
+.task-step.completion {
+  margin-top: 4px;
+  padding: 10px 12px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #e4e4e7;
+  background: rgba(34, 197, 94, 0.1);
+  border-radius: 6px;
+}
+
+.task-step.complete {
+  opacity: 0.8;
+}
+
+.task-step.queued {
+  opacity: 0.5;
+}
+
+.task-step.current {
+  opacity: 1;
+}
+
+.task-step-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.task-spinner {
+  width: 12px;
+  height: 12px;
+  border: 2px solid rgba(99, 102, 241, 0.3);
+  border-top-color: #6366f1;
   border-radius: 50%;
-  animation: streamingPulse 1.4s infinite;
+  animation: taskSpin 0.8s linear infinite;
+}
+
+@keyframes taskSpin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
-.streaming-indicator .dot:nth-child(2) {
-  animation-delay: 0.2s;
+.task-checkmark {
+  color: #22c55e;
+  font-size: 13px;
+  font-weight: 600;
 }
 
-.streaming-indicator .dot:nth-child(3) {
-  animation-delay: 0.4s;
+.task-queued {
+  color: #52525b;
+  font-size: 14px;
+  font-weight: 400;
 }
 
-@keyframes streamingPulse {
-  0%, 60%, 100% {
-    opacity: 0.3;
-    transform: scale(0.8);
+.task-step-text {
+  flex: 1;
+  color: #e4e4e7;
+}
+
+.task-step.complete .task-step-text {
+  color: #a1a1aa;
+}
+
+.chat-panel.light .task-step.status {
+  color: #18181b;
+}
+
+.chat-panel.light .task-step.tool {
+  color: #71717a;
+}
+
+.chat-panel.light .task-step.completion {
+  color: #18181b;
+  background: rgba(34, 197, 94, 0.15);
+}
+
+.chat-panel.light .task-step-text {
+  color: #27272a;
+}
+
+.chat-panel.light .task-step.complete .task-step-text {
+  color: #71717a;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
   }
-  30% {
-    opacity: 1;
-    transform: scale(1);
+  to {
+    transform: rotate(360deg);
   }
 }
+
+/* Todo List */
+.todo-list {
+  margin-bottom: 16px;
+  padding: 12px;
+  background: rgba(99, 102, 241, 0.1);
+  border: 1px solid rgba(99, 102, 241, 0.3);
+  border-radius: 12px;
+}
+
+.chat-panel.light .todo-list {
+  background: rgba(99, 102, 241, 0.05);
+  border-color: rgba(99, 102, 241, 0.2);
+}
+
+.todo-list-header {
+  font-size: 12px;
+  font-weight: 600;
+  color: #a5b4fc;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+}
+
+.chat-panel.light .todo-list-header {
+  color: #7c3aed;
+}
+
+.todo-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 8px;
+  font-size: 13px;
+  color: #e4e4e7;
+  transition: opacity 0.2s;
+}
+
+.chat-panel.light .todo-item {
+  color: #27272a;
+}
+
+.todo-item.todo-completed {
+  opacity: 0.7;
+}
+
+.todo-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.todo-checkmark {
+  color: #22c55e;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.todo-spinner {
+  width: 12px;
+  height: 12px;
+  border: 2px solid rgba(99, 102, 241, 0.3);
+  border-top-color: #6366f1;
+  border-radius: 50%;
+  animation: taskSpin 0.8s linear infinite;
+}
+
+.todo-pending {
+  color: #71717a;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.todo-text {
+  flex: 1;
+  color: #e4e4e7;
+}
+
+.chat-panel.light .todo-text {
+  color: #27272a;
+}
+
+.todo-item.todo-completed .todo-text {
+  color: #a1a1aa;
+}
+
+.chat-panel.light .todo-item.todo-completed .todo-text {
+  color: #71717a;
+}
+
+/* Phase grouping (status + its tool calls) */
+.phase-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+/* Status message with dropdown */
+.task-step.has-dropdown {
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.15s;
+  border-radius: 6px;
+  margin: 0 -4px;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.task-step.has-dropdown:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.chat-panel.light .task-step.has-dropdown:hover {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+.task-step-elapsed {
+  font-size: 11px;
+  color: #71717a;
+  opacity: 0.6;
+  font-weight: 400;
+  margin-left: 6px;
+}
+
+.task-step-dropdown-icon {
+  margin-left: auto;
+  font-size: 10px;
+  color: #71717a;
+  opacity: 0.7;
+  transition: opacity 0.15s;
+}
+
+.task-step.has-dropdown:hover .task-step-dropdown-icon {
+  opacity: 1;
+}
+
+/* Expanded tool details */
+.task-step-details {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-left: 26px;
+  margin-top: 4px;
+  padding-left: 12px;
+  border-left: 2px solid rgba(255, 255, 255, 0.1);
+}
+
+.chat-panel.light .task-step-details {
+  border-left-color: rgba(0, 0, 0, 0.1);
+}
+
+.task-step-detail {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 3px 8px;
+  font-size: 12px;
+  color: #71717a;
+  transition: opacity 0.2s;
+}
+
+.task-step-detail .task-step-indicator {
+  width: 12px;
+  height: 12px;
+}
+
+.task-step-detail .task-checkmark {
+  font-size: 10px;
+  color: #6b7280;
+}
+
+.task-step-detail .task-spinner {
+  width: 10px;
+  height: 10px;
+  border-width: 1.5px;
+  border-color: #71717a transparent transparent transparent;
+}
+
+.task-step-detail.complete {
+  opacity: 0.7;
+}
+
+.task-step-detail.executing {
+  opacity: 1;
+}
+
+.task-step-detail.executing .task-step-text {
+  color: #a1a1aa;
+}
+
+.chat-panel.light .task-step-detail.executing .task-step-text {
+  color: #52525b;
+}
+
+.task-step-detail.queued {
+  opacity: 0.5;
+}
 /* Control Pill - Bottom chat toggle */
 .control-pill {
   color-scheme: light;