From 2d3815ec336eda35acbac47928958e2e55f66804 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Tue, 28 Oct 2025 19:43:24 +0000
Subject: [PATCH] refactor: restyle prompt input via tokens

---
 src/components/prompt-input.tsx |  10 +--
 src/index.css                   | 109 --------------------------------
 src/styles/components.css       | 101 +++++++++++++++++++++++++++++
 3 files changed, 106 insertions(+), 114 deletions(-)

diff --git a/src/components/prompt-input.tsx b/src/components/prompt-input.tsx
index 240efbc5..e68ce934 100644
--- a/src/components/prompt-input.tsx
+++ b/src/components/prompt-input.tsx
@@ -638,12 +638,12 @@ export default function PromptInput(props: PromptInputProps) {
 
         <div class="flex flex-1 flex-col">
           <Show when={attachments().length > 0}>
-            <div class="flex flex-wrap gap-1.5 border-b border-gray-200 pb-2 dark:border-gray-700">
+            <div class="flex flex-wrap gap-1.5 border-b pb-2" style="border-color: var(--border-base);">
               <For each={attachments()}>
                 {(attachment) => {
                   const isImage = attachment.mediaType.startsWith("image/")
                   return (
-                    <div class="inline-flex items-center gap-1.5 rounded-md bg-blue-50 px-2.5 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10 dark:bg-blue-500/10 dark:text-blue-400 dark:ring-blue-500/20">
+                    <div class="attachment-chip">
                       <Show
                         when={isImage}
                         fallback={
@@ -690,7 +690,7 @@ export default function PromptInput(props: PromptInputProps) {
                       <span>{attachment.source.type === "text" ? attachment.display : attachment.filename}</span>
                       <button
                         onClick={() => handleRemoveAttachment(attachment.id)}
-                        class="ml-0.5 flex h-4 w-4 items-center justify-center rounded hover:bg-blue-100 dark:hover:bg-blue-500/20"
+                        class="attachment-remove"
                         aria-label="Remove attachment"
                       >
                         <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -737,12 +737,12 @@ export default function PromptInput(props: PromptInputProps) {
                 <Kbd>Enter</Kbd> to send • <Kbd>Shift+Enter</Kbd> for new line • <Kbd>@</Kbd> for files/agents •{" "}
                 <Kbd>↑↓</Kbd> for history
                 <Show when={attachments().length > 0}>
-                  <span class="ml-2 text-xs text-gray-500">• {attachments().length} file(s) attached</span>
+                  <span class="ml-2 text-xs" style="color: var(--text-muted);">• {attachments().length} file(s) attached</span>
                 </Show>
               </>
             }
           >
-            <span class="text-orange-600 dark:text-orange-400 font-medium">
+            <span class="font-medium" style="color: var(--status-warning);">
               Press <Kbd>Esc</Kbd> again to abort session
             </span>
           </Show>
diff --git a/src/index.css b/src/index.css
index d51a465e..21d25eb6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -547,116 +547,7 @@ body {
   }
 }
 
-.prompt-input-container {
-  display: flex;
-  flex-direction: column;
-  border-top: 1px solid var(--border-base);
-  background-color: var(--surface-base);
-}
 
-.prompt-input-wrapper {
-  display: flex;
-  align-items: flex-end;
-  gap: 8px;
-  padding: 12px 16px;
-}
-
-.prompt-input {
-  flex: 1;
-  min-height: 40px;
-  max-height: 200px;
-  padding: 10px 12px;
-  border: 1px solid var(--border-base);
-  border-radius: 6px;
-  font-family: inherit;
-  font-size: 14px;
-  line-height: 1.5;
-  resize: none;
-  background-color: var(--surface-base);
-  color: inherit;
-  outline: none;
-  transition: border-color 150ms ease;
-}
-
-.prompt-input:focus {
-  border-color: var(--accent-primary);
-}
-
-.prompt-input:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.prompt-input::placeholder {
-  color: var(--text-muted);
-}
-
-.send-button {
-  width: 40px;
-  height: 40px;
-  border-radius: 6px;
-  background-color: var(--accent-primary);
-  color: white;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition:
-    opacity 150ms ease,
-    transform 150ms ease;
-  flex-shrink: 0;
-}
-
-.send-button:hover:not(:disabled) {
-  opacity: 0.9;
-  transform: scale(1.05);
-}
-
-.send-button:active:not(:disabled) {
-  transform: scale(0.95);
-}
-
-.send-button:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.send-icon {
-  font-size: 16px;
-}
-
-.spinner-small {
-  width: 16px;
-  height: 16px;
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  border-top-color: white;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-.prompt-input-hints {
-  padding: 0 16px 8px 16px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.hint {
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.hint kbd {
-  display: inline-block;
-  padding: 2px 6px;
-  font-size: 11px;
-  font-family: monospace;
-  background-color: var(--surface-secondary);
-  border: 1px solid var(--border-base);
-  border-radius: 3px;
-  margin: 0 2px;
-}
 
 .session-view {
   display: flex;
diff --git a/src/styles/components.css b/src/styles/components.css
index 48e2aaae..6f277aa0 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -51,4 +51,105 @@
 @keyframes pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.5; }
+}
+
+/* Prompt input component utilities */
+.prompt-input-container {
+  @apply flex flex-col border-t;
+  border-color: var(--border-base);
+  background-color: var(--surface-base);
+}
+
+.prompt-input-wrapper {
+  @apply flex items-end gap-2 p-3;
+}
+
+.prompt-input {
+  @apply flex-1 min-h-[40px] max-h-[200px] p-2.5 border rounded-md text-sm resize-none outline-none transition-colors;
+  font-family: inherit;
+  background-color: var(--surface-base);
+  color: inherit;
+  border-color: var(--border-base);
+  line-height: var(--line-height-normal);
+}
+
+.prompt-input:focus {
+  border-color: var(--accent-primary);
+}
+
+.prompt-input:disabled {
+  @apply opacity-60 cursor-not-allowed;
+}
+
+.prompt-input::placeholder {
+  color: var(--text-muted);
+}
+
+.send-button {
+  @apply w-10 h-10 rounded-md border-none cursor-pointer flex items-center justify-center transition-all flex-shrink-0;
+  background-color: var(--accent-primary);
+  color: var(--text-inverted);
+}
+
+.send-button:hover:not(:disabled) {
+  @apply opacity-90 scale-105;
+}
+
+.send-button:active:not(:disabled) {
+  @apply scale-95;
+}
+
+.send-button:disabled {
+  @apply opacity-40 cursor-not-allowed;
+}
+
+.send-icon {
+  @apply text-base;
+}
+
+.prompt-input-hints {
+  @apply px-4 pb-2 flex justify-between items-center;
+}
+
+.hint {
+  @apply text-xs;
+  color: var(--text-muted);
+}
+
+.hint kbd {
+  @apply inline-block px-1.5 py-0.5 text-xs font-mono rounded mx-0.5;
+  background-color: var(--surface-secondary);
+  border: 1px solid var(--border-base);
+  border-radius: 3px;
+}
+
+/* Attachment chip utilities */
+.attachment-chip {
+  @apply inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium ring-1 ring-inset;
+  background-color: var(--accent-primary);
+  color: var(--accent-primary);
+  --attachment-bg: rgba(0, 102, 255, 0.1);
+  --attachment-text: #0066ff;
+  --attachment-ring: rgba(0, 102, 255, 0.1);
+  background-color: var(--attachment-bg);
+  color: var(--attachment-text);
+  ring-color: var(--attachment-ring);
+}
+
+[data-theme="dark"] .attachment-chip {
+  --attachment-bg: rgba(0, 128, 255, 0.1);
+  --attachment-text: #0080ff;
+  --attachment-ring: rgba(0, 128, 255, 0.2);
+}
+
+.attachment-remove {
+  @apply ml-0.5 flex h-4 w-4 items-center justify-center rounded transition-colors;
+}
+
+.attachment-remove:hover {
+  background-color: rgba(0, 102, 255, 0.1);
+}
+
+[data-theme="dark"] .attachment-remove:hover {
+  background-color: rgba(0, 128, 255, 0.2);
 }
\ No newline at end of file