From 03bf91ecfd3accd9852e9a0e62846777e2ec2682 Mon Sep 17 00:00:00 2001
From: pcarter <pcarter@fastmail.com>
Date: Sat, 11 Apr 2026 12:25:03 -0700
Subject: [PATCH] improvements

---
 app/globals.css         | 107 ++++++++++++++++++++++++++----------
 app/icon.svg            |   6 ++
 app/page.tsx            | 118 ++++++++++++++++++++++------------------
 app/share/[id]/page.tsx |  31 +++++++----
 4 files changed, 170 insertions(+), 92 deletions(-)
 create mode 100644 app/icon.svg

diff --git a/app/globals.css b/app/globals.css
index ca2d4ed..f5468aa 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -294,6 +294,48 @@ header select option {
 }
 
 .message {
+  display: flex;
+  align-items: stretch;
+}
+
+.message-shell {
+  width: 100%;
+  border: 1px solid var(--border);
+  background: #0a0a0a;
+  padding: 10px 12px 12px;
+}
+
+.message.user .message-shell {
+  border-left: 2px solid rgba(85, 153, 255, 0.6);
+  background: rgba(85, 153, 255, 0.03);
+}
+
+.message.assistant .message-shell {
+  border-left: 2px solid rgba(51, 255, 51, 0.55);
+  background: rgba(51, 255, 51, 0.02);
+}
+
+.message-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 10px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.message-label {
+  color: var(--dim);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+}
+
+.message.user .message-label { color: rgba(85, 153, 255, 0.85); }
+.message.assistant .message-label { color: rgba(51, 255, 51, 0.85); }
+
+.message-body {
   display: flex;
   gap: 12px;
   align-items: flex-start;
@@ -301,41 +343,35 @@ header select option {
 
 .msg-actions {
   display: flex;
-  gap: 4px;
-  margin-top: 6px;
-  opacity: 0;
-  transition: opacity 0.15s;
+  gap: 6px;
+  flex-wrap: wrap;
 }
 
-.message:hover .msg-actions { opacity: 1; }
-
 .msg-copy-btn {
   background: transparent;
   color: var(--dim);
-  border: 1px solid transparent;
+  border: 1px solid var(--border);
   font-family: inherit;
   font-size: 11px;
-  padding: 2px 6px;
+  padding: 2px 7px;
   cursor: pointer;
   white-space: nowrap;
 }
 
-.message:hover .msg-copy-btn { }
-.msg-copy-btn:hover { color: var(--green); border-color: var(--border); }
+.msg-copy-btn:hover { color: var(--green); border-color: var(--green); }
 
 .msg-retry-btn {
   background: transparent;
   color: var(--dim);
-  border: 1px solid transparent;
+  border: 1px solid var(--border);
   font-family: inherit;
   font-size: 11px;
-  padding: 2px 6px;
+  padding: 2px 7px;
   cursor: pointer;
   white-space: nowrap;
 }
 
-.message:hover .msg-retry-btn { }
-.msg-retry-btn:hover { color: var(--fg); border-color: var(--border); }
+.msg-retry-btn:hover { color: var(--fg); border-color: var(--fg); }
 
 .saved-flash {
   color: var(--green);
@@ -346,16 +382,15 @@ header select option {
 .msg-edit-btn {
   background: transparent;
   color: var(--dim);
-  border: 1px solid transparent;
+  border: 1px solid var(--border);
   font-family: inherit;
   font-size: 11px;
-  padding: 2px 6px;
+  padding: 2px 7px;
   cursor: pointer;
   white-space: nowrap;
 }
 
-.message:hover .msg-edit-btn { }
-.msg-edit-btn:hover { color: var(--blue); border-color: var(--border); }
+.msg-edit-btn:hover { color: var(--blue); border-color: var(--blue); }
 
 .edit-form {
   display: flex;
@@ -449,11 +484,12 @@ header select option {
 .input-area {
   display: flex;
   flex-direction: column;
-  padding: 10px 16px;
-  border-top: 1px solid var(--border);
-  background: #080808;
+  padding: 12px 16px 14px;
+  border-top: 1px solid var(--green);
+  background: #060606;
   flex-shrink: 0;
   gap: 8px;
+  box-shadow: inset 0 1px 0 rgba(51, 255, 51, 0.08);
 }
 
 .pending-attachments {
@@ -523,13 +559,22 @@ header select option {
   display: flex;
   align-items: flex-start;
   gap: 8px;
+  border: 1px solid var(--border);
+  background: #0a0a0a;
+  padding: 10px 12px;
+}
+
+.input-row:focus-within {
+  border-color: var(--green);
+  box-shadow: inset 0 0 0 1px rgba(51, 255, 51, 0.1);
 }
 
 .input-prompt {
   color: var(--green);
   font-weight: bold;
-  padding-top: 4px;
+  padding-top: 5px;
   flex-shrink: 0;
+  text-shadow: 0 0 8px rgba(51, 255, 51, 0.18);
 }
 
 .input-row textarea {
@@ -540,7 +585,7 @@ header select option {
   font-family: inherit;
   font-size: 16px; /* must be ≥16px to prevent iOS Safari auto-zoom on focus */
   line-height: 1.6;
-  padding: 4px 0;
+  padding: 4px 2px;
   resize: none;
   min-height: 32px;
   max-height: 200px;
@@ -548,16 +593,16 @@ header select option {
 }
 
 .input-row textarea:focus { outline: none; }
-.input-row textarea::placeholder { color: var(--dim); }
+.input-row textarea::placeholder { color: #4b4b4b; }
 .input-row textarea:disabled { opacity: 0.4; }
 
 .input-row button {
-  background: transparent;
+  background: #091109;
   color: var(--green);
   border: 1px solid var(--green);
   font-family: inherit;
   font-size: 13px;
-  padding: 4px 10px;
+  padding: 5px 12px;
   cursor: pointer;
   white-space: nowrap;
   flex-shrink: 0;
@@ -578,15 +623,21 @@ header select option {
   color: var(--bg);
 }
 
+.input-row > button:last-child:not(:disabled) {
+  box-shadow: 0 0 10px rgba(51, 255, 51, 0.18);
+}
+
 /* On desktop: tools flow inline with the rest of the input row */
 .input-tools {
-  display: contents;
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
 }
 
 /* On mobile: textarea gets its own full-width row; tools + [SEND] share the row below */
 @media (pointer: coarse) {
   .input-area {
-    padding: 8px 12px;
+    padding: 10px 12px 12px;
   }
   .input-row {
     flex-wrap: wrap;
diff --git a/app/icon.svg b/app/icon.svg
new file mode 100644
index 0000000..094f42a
--- /dev/null
+++ b/app/icon.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" fill="#0c0c0c"/>
+  <rect x="6" y="8" width="52" height="48" fill="none" stroke="#2a2a2a" stroke-width="4"/>
+  <path d="M20 22 L32 32 L20 42" fill="none" stroke="#33ff33" stroke-width="6" stroke-linecap="square" stroke-linejoin="miter"/>
+  <line x1="36" y1="44" x2="48" y2="44" stroke="#33ff33" stroke-width="6" stroke-linecap="square"/>
+</svg>
diff --git a/app/page.tsx b/app/page.tsx
index 95a08cd..d6816ca 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -832,67 +832,81 @@ export default function Home() {
           )}
           {messages.map((msg, i) => (
             <div key={i} className={`message ${msg.role}`}>
-              <span className="role">{msg.role === 'user' ? '>' : '#'}</span>
-              <div className="content">
-                {msg.images && msg.images.length > 0 && (
-                  <div className="message-images">
-                    {msg.images.map((img, j) => (
-                      <img key={j} src={`data:${img.mimeType};base64,${img.data}`} alt="" className="message-image" />
-                    ))}
-                  </div>
-                )}
-                {editingIndex === i ? (
-                  <div className="edit-form">
-                    <textarea
-                      value={editingContent}
-                      onChange={e => setEditingContent(e.target.value)}
-                      onKeyDown={e => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) confirmEdit(); if (e.key === 'Escape') setEditingIndex(null); }}
-                      autoFocus
-                    />
-                    <div className="edit-actions">
-                      <button type="button" onClick={confirmEdit}>[SEND]</button>
-                      <button type="button" onClick={() => setEditingIndex(null)}>[CANCEL]</button>
+              <div className="message-shell">
+                <div className="message-head">
+                  <span className="message-label">{msg.role === 'assistant' ? '[OUTPUT]' : '[INPUT]'}</span>
+                  {editingIndex === null && (
+                    <div className="msg-actions">
+                      {msg.role === 'assistant' && (
+                        <button className="msg-copy-btn" type="button" aria-label="Copy output as markdown" onClick={() => copyMessage(msg.content, i)}>
+                          {copiedMsgIndex === i ? '[COPIED!]' : '[COPY]'}
+                        </button>
+                      )}
+                      {msg.role === 'assistant' && !streaming && i === messages.length - 1 && (
+                        <button className="msg-retry-btn" type="button" onClick={handleRetry}>[RETRY]</button>
+                      )}
+                      {msg.role === 'user' && !streaming && (
+                        <button className="msg-edit-btn" type="button" onClick={() => startEdit(i)}>[EDIT]</button>
+                      )}
                     </div>
-                  </div>
-                ) : (
-                  msg.role === 'assistant'
-                    ? <RenderedMarkdown text={msg.content} html={msg.html} />
-                    : msg.content && <RenderedMarkdown text={msg.content} html={msg.html} />
-                )}
-                {editingIndex === null && (
-                  <div className="msg-actions">
-                    {msg.role === 'assistant' && (
-                      <button className="msg-copy-btn" onClick={() => copyMessage(msg.content, i)}>
-                        {copiedMsgIndex === i ? '[COPIED!]' : '[COPY]'}
-                      </button>
-                    )}
-                    {msg.role === 'assistant' && !streaming && i === messages.length - 1 && (
-                      <button className="msg-retry-btn" onClick={handleRetry}>[RETRY]</button>
+                  )}
+                </div>
+                <div className="message-body">
+                  <span className="role">{msg.role === 'user' ? '>' : '#'}</span>
+                  <div className="content">
+                    {msg.images && msg.images.length > 0 && (
+                      <div className="message-images">
+                        {msg.images.map((img, j) => (
+                          <img key={j} src={`data:${img.mimeType};base64,${img.data}`} alt="" className="message-image" />
+                        ))}
+                      </div>
                     )}
-                    {msg.role === 'user' && !streaming && (
-                      <button className="msg-edit-btn" onClick={() => startEdit(i)}>[EDIT]</button>
+                    {editingIndex === i ? (
+                      <div className="edit-form">
+                        <textarea
+                          value={editingContent}
+                          onChange={e => setEditingContent(e.target.value)}
+                          onKeyDown={e => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) confirmEdit(); if (e.key === 'Escape') setEditingIndex(null); }}
+                          autoFocus
+                        />
+                        <div className="edit-actions">
+                          <button type="button" onClick={confirmEdit}>[SEND]</button>
+                          <button type="button" onClick={() => setEditingIndex(null)}>[CANCEL]</button>
+                        </div>
+                      </div>
+                    ) : (
+                      msg.role === 'assistant'
+                        ? <RenderedMarkdown text={msg.content} html={msg.html} />
+                        : msg.content && <RenderedMarkdown text={msg.content} html={msg.html} />
                     )}
                   </div>
-                )}
+                </div>
               </div>
             </div>
           ))}
           {streaming && (
             <div className="message assistant">
-              <span className="role">#</span>
-              {streamingContent
-                ? <RenderedMarkdown html={streamingHtml || undefined} text={streamingHtml ? '' : streamingContent} className="content" />
-                : <span className="content thinking">
-                    {!connected
-                      ? <span className="waiting-cursor">▋</span>
-                      : webSearchPhase === 'searching'
-                        ? <>searching the web<span className="thinking-dots"><span>.</span><span>.</span><span>.</span></span></>
-                        : webSearchPhase === 'generating'
-                          ? <>generating<span className="thinking-dots"><span>.</span><span>.</span><span>.</span></span></>
-                          : <>thinking<span className="thinking-dots"><span>.</span><span>.</span><span>.</span></span></>
-                    }
-                  </span>
-              }
+              <div className="message-shell">
+                <div className="message-head">
+                  <span className="message-label">[OUTPUT]</span>
+                </div>
+                <div className="message-body">
+                  <span className="role">#</span>
+                  {streamingContent
+                    ? <RenderedMarkdown html={streamingHtml || undefined} text={streamingHtml ? '' : streamingContent} className="content" />
+                    : <span className="content thinking">
+                        {!connected
+                          ? <span className="waiting-cursor">▋</span>
+                          : webSearchPhase === 'searching'
+                            ? <>searching the web<span className="thinking-dots"><span>.</span><span>.</span><span>.</span></span></>
+                            : webSearchPhase === 'generating'
+                              ? <>generating<span className="thinking-dots"><span>.</span><span>.</span><span>.</span></span></>
+                              : <>thinking<span className="thinking-dots"><span>.</span><span>.</span><span>.</span></span></>
+                        }
+                      </span>
+                  }
+                </div>
+              </div>
             </div>
           )}
             </>
diff --git a/app/share/[id]/page.tsx b/app/share/[id]/page.tsx
index a42f4bf..7f2c2c6 100644
--- a/app/share/[id]/page.tsx
+++ b/app/share/[id]/page.tsx
@@ -77,19 +77,26 @@ export default async function SharePage({ params }: { params: Promise<{ id: stri
       <div className="messages">
         {messages.map((msg, i) => (
           <div key={i} className={`message ${msg.role}`}>
-            <span className="role">{msg.role === 'user' ? '>' : '#'}</span>
-            <div className="content">
-              {msg.images && msg.images.length > 0 && (
-                <div className="message-images">
-                  {msg.images.map((img, j) => (
-                    <img key={j} src={`data:${img.mimeType};base64,${img.data}`} alt="" className="message-image" />
-                  ))}
+            <div className="message-shell">
+              <div className="message-head">
+                <span className="message-label">{msg.role === 'assistant' ? '[OUTPUT]' : '[INPUT]'}</span>
+              </div>
+              <div className="message-body">
+                <span className="role">{msg.role === 'user' ? '>' : '#'}</span>
+                <div className="content">
+                  {msg.images && msg.images.length > 0 && (
+                    <div className="message-images">
+                      {msg.images.map((img, j) => (
+                        <img key={j} src={`data:${img.mimeType};base64,${img.data}`} alt="" className="message-image" />
+                      ))}
+                    </div>
+                  )}
+                  {msg.role === 'assistant'
+                    ? <RenderedMarkdown text={msg.content} />
+                    : msg.content && <RenderedMarkdown text={msg.content} />
+                  }
                 </div>
-              )}
-              {msg.role === 'assistant'
-                ? <RenderedMarkdown text={msg.content} />
-                : msg.content && <RenderedMarkdown text={msg.content} />
-              }
+              </div>
             </div>
           </div>
         ))}
-- 
2.51.2