From 22283851ee736a481e90488da317d6bc973b8e67 Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Tue, 1 Jul 2025 13:58:54 -0500
Subject: [PATCH] Style prompts and insertions in the terminal

---
 app/assets/stylesheets/actiontext-lexical.css |   9 +
 app/assets/stylesheets/rich-text-content.css  | 402 +++++++++---------
 app/assets/stylesheets/terminals.css          |  10 +
 app/views/prompts/commands/index.html.erb     |   6 +-
 4 files changed, 226 insertions(+), 201 deletions(-)

diff --git a/app/assets/stylesheets/actiontext-lexical.css b/app/assets/stylesheets/actiontext-lexical.css
index 893e75bca..0d1be440e 100644
--- a/app/assets/stylesheets/actiontext-lexical.css
+++ b/app/assets/stylesheets/actiontext-lexical.css
@@ -150,6 +150,8 @@
     background-color: var(--color-canvas);
     border-radius: calc(var(--lexical-prompt-padding) * 2);
     box-shadow: var(--shadow);
+    color: var(--color-ink);
+    font-family: var(--font-sans);
     font-size: var(--text-small);
     list-style: none;
     margin: 0;
@@ -193,6 +195,13 @@
       inline-size: var(--lexical-prompt-avatar-size);
       margin: 0;
     }
+
+    code {
+      background-color: var(--color-terminal-text-light);
+      border-radius: 0.25ch;
+      font-size: 0.95em;
+      padding-inline: 0.5ch;
+    }
   }
 
   /* Empty state */
diff --git a/app/assets/stylesheets/rich-text-content.css b/app/assets/stylesheets/rich-text-content.css
index e78805f95..776c32f75 100644
--- a/app/assets/stylesheets/rich-text-content.css
+++ b/app/assets/stylesheets/rich-text-content.css
@@ -53,173 +53,6 @@
       }
     }
 
-    /* Attachments */
-    .attachment:not(.attachment--custom) {
-      block-size: auto;
-      display: inline-block;
-      inline-size: 100%;
-      position: relative;
-      margin-inline: 0;
-      max-inline-size: 100%;
-
-      &:is(figure) img,
-      &:is(figure) video {
-        block-size: auto;
-        display: block;
-        margin-inline: auto;
-        max-inline-size: 100%;
-        user-select: none;
-      }
-
-      :where(progress) {
-        inline-size: 100%;
-        margin: auto;
-      }
-    }
-
-    .attachment__caption {
-      color: var(--color-ink-dark);
-      display: flex;
-      font-size: var(--text-small);
-      flex-wrap: wrap;
-      line-height: 1.3;
-      column-gap: 0.5ch;
-      justify-content: center;
-      margin: var(--block-space-half) var(--inline-space);
-      text-align: center;
-
-      .input {
-        inline-size: 100%;
-        max-inline-size: 100%;
-        text-align: center;
-
-        @supports (field-sizing: content) {
-          field-sizing: content;
-          inline-size: auto;
-          min-inline-size: 20ch;
-        }
-      }
-    }
-
-    .attachment__figure {
-      --hover-size: 0;
-    }
-
-    .attachment--file {
-      align-items: center;
-      display: inline-flex;
-
-      .attachment__caption {
-        flex-direction: column;
-        flex-wrap: nowrap;
-        justify-content: flex-start;
-        text-align: start;
-
-        strong {
-          color: var(--color-ink);
-        }
-      }
-    }
-
-    .attachment__icon {
-      aspect-ratio: 4/5;
-      background-color: var(--color-canvas);
-      block-size: calc(2.5lh + 0.5ch);
-      border: 2px solid var(--color-ink-medium);
-      border-radius: 0.3em;
-      color: var(--color-ink-dark);
-      display: inline-grid;
-      font-size: var(--text-small);
-      font-weight: 800;
-      inline-size: auto;
-      overflow: clip;
-      padding-block-start: 0.4lh;
-      place-content: center;
-      position: relative;
-      text-transform: uppercase;
-
-      &::before {
-        background-color: var(--color-ink-medium);
-        block-size: 0.5lh;
-        content: "";
-        display: block;
-        inline-size: 100%;
-        inset: 0 0 auto;
-        position: absolute;
-      }
-
-      .attachment--psd &,
-      .attachment--key &,
-      .attachment--sketch &,
-      .attachment--ai &,
-      .attachment--eps &,
-      .attachment--indd &,
-      .attachment--svg &,
-      .attachment--ppt &,
-      .attachment--pptx & {
-        color: oklch(var(--lch-red-dark));
-        background-color: oklch(var(--lch-red-lightest));
-        border-color: oklch(var(--lch-red-medium));
-
-        &::before {
-          background-color: oklch(var(--lch-red-medium));
-        }
-      }
-
-      .attachment--css &,
-      .attachment--php &,
-      .attachment--json &,
-      .attachment--htm &,
-      .attachment--html &,
-      .attachment--rb &,
-      .attachment--erb &,
-      .attachment--ts &,
-      .attachment--js & {
-        color: oklch(var(--lch-purple-dark));
-        background-color: oklch(var(--lch-purple-lightest));
-        border-color: oklch(var(--lch-purple-medium));
-
-        &::before {
-          background-color: oklch(var(--lch-purple-medium));
-        }
-      }
-
-      .attachment--txt &,
-      .attachment--pages &,
-      .attachment--rtf &,
-      .attachment--md &,
-      .attachment--doc &,
-      .attachment--docx & {
-        color: oklch(var(--lch-blue-dark));
-        background-color: oklch(var(--lch-blue-lightest));
-        border-color: oklch(var(--lch-blue-medium));
-
-        &::before {
-          background-color: oklch(var(--lch-blue-medium));
-        }
-      }
-
-      .attachment--csv &,
-      .attachment--numbers &,
-      .attachment--xls &,
-      .attachment--xlsx & {
-        color: oklch(var(--lch-green-dark));
-        background-color: oklch(var(--lch-green-lightest));
-        border-color: oklch(var(--lch-green-medium));
-
-        &::before {
-          background-color: oklch(var(--lch-green-medium));
-        }
-      }
-    }
-
-    .attachment__link {
-      --hover-size: 0;
-
-      color: var(--color-link);
-      text-decoration: underline;
-    }
-
     /* Avoid extra space due to empty paragraphs */
     p:empty {
       display: none;
@@ -320,44 +153,217 @@
         }
       }
     }
+  }
 
-    /* Custom attachments such as mentions, etc. */
-    .attachment--custom {
-      display: inline;
-      padding: 0;
-      margin: 0;
-      white-space: normal;
+  /* Attachments
+  /* ------------------------------------------------------------------------ */
+
+  .attachment:not(.attachment--custom) {
+    block-size: auto;
+    display: inline-block;
+    inline-size: 100%;
+    position: relative;
+    margin-inline: 0;
+    max-inline-size: 100%;
+
+    &:is(figure) img,
+    &:is(figure) video {
+      block-size: auto;
+      display: block;
+      margin-inline: auto;
+      max-inline-size: 100%;
+      user-select: none;
     }
 
-    .attachment--custom,
-    action-text-attachment[content-type^='application/vnd.actiontext'] {
-      --attachment-image-size: 1em;
-      --attachment-selected-color: oklch(var(--lch-blue-dark));
+    :where(progress) {
+      inline-size: 100%;
+      margin: auto;
+    }
+  }
 
-      align-items: center;
-      display: inline-flex;
-      gap: 0.25ch;
-      position: relative;
-      vertical-align: bottom;
+  .attachment__caption {
+    color: var(--color-ink-dark);
+    display: flex;
+    font-size: var(--text-small);
+    flex-wrap: wrap;
+    line-height: 1.3;
+    column-gap: 0.5ch;
+    justify-content: center;
+    margin: var(--block-space-half) var(--inline-space);
+    text-align: center;
 
-      lexical-editor & {
-        cursor: pointer;
-      }
+    .input {
+      inline-size: 100%;
+      max-inline-size: 100%;
+      text-align: center;
 
-      img {
-        block-size: var(--attachment-image-size);
-        border-radius: 50%;
-        inline-size: var(--attachment-image-size);
-      }
-
-      &.node--selected {
-        background: var(--attachment-selected-color);
-        box-shadow:
-          -0.25ch 0 0 var(--attachment-selected-color),
-           0.5ch 0 0 var(--attachment-selected-color);
-        border-radius: 99rem;
-        color: var(--color-ink-inverted);
+      @supports (field-sizing: content) {
+        field-sizing: content;
+        inline-size: auto;
+        min-inline-size: 20ch;
       }
     }
   }
+
+  .attachment__figure {
+    --hover-size: 0;
+  }
+
+  .attachment--file {
+    align-items: center;
+    display: inline-flex;
+
+    .attachment__caption {
+      flex-direction: column;
+      flex-wrap: nowrap;
+      justify-content: flex-start;
+      text-align: start;
+
+      strong {
+        color: var(--color-ink);
+      }
+    }
+  }
+
+  .attachment__icon {
+    aspect-ratio: 4/5;
+    background-color: var(--color-canvas);
+    block-size: calc(2.5lh + 0.5ch);
+    border: 2px solid var(--color-ink-medium);
+    border-radius: 0.3em;
+    color: var(--color-ink-dark);
+    display: inline-grid;
+    font-size: var(--text-small);
+    font-weight: 800;
+    inline-size: auto;
+    overflow: clip;
+    padding-block-start: 0.4lh;
+    place-content: center;
+    position: relative;
+    text-transform: uppercase;
+
+    &::before {
+      background-color: var(--color-ink-medium);
+      block-size: 0.5lh;
+      content: "";
+      display: block;
+      inline-size: 100%;
+      inset: 0 0 auto;
+      position: absolute;
+    }
+
+    .attachment--psd &,
+    .attachment--key &,
+    .attachment--sketch &,
+    .attachment--ai &,
+    .attachment--eps &,
+    .attachment--indd &,
+    .attachment--svg &,
+    .attachment--ppt &,
+    .attachment--pptx & {
+      color: oklch(var(--lch-red-dark));
+      background-color: oklch(var(--lch-red-lightest));
+      border-color: oklch(var(--lch-red-medium));
+
+      &::before {
+        background-color: oklch(var(--lch-red-medium));
+      }
+    }
+
+    .attachment--css &,
+    .attachment--php &,
+    .attachment--json &,
+    .attachment--htm &,
+    .attachment--html &,
+    .attachment--rb &,
+    .attachment--erb &,
+    .attachment--ts &,
+    .attachment--js & {
+      color: oklch(var(--lch-purple-dark));
+      background-color: oklch(var(--lch-purple-lightest));
+      border-color: oklch(var(--lch-purple-medium));
+
+      &::before {
+        background-color: oklch(var(--lch-purple-medium));
+      }
+    }
+
+    .attachment--txt &,
+    .attachment--pages &,
+    .attachment--rtf &,
+    .attachment--md &,
+    .attachment--doc &,
+    .attachment--docx & {
+      color: oklch(var(--lch-blue-dark));
+      background-color: oklch(var(--lch-blue-lightest));
+      border-color: oklch(var(--lch-blue-medium));
+
+      &::before {
+        background-color: oklch(var(--lch-blue-medium));
+      }
+    }
+
+    .attachment--csv &,
+    .attachment--numbers &,
+    .attachment--xls &,
+    .attachment--xlsx & {
+      color: oklch(var(--lch-green-dark));
+      background-color: oklch(var(--lch-green-lightest));
+      border-color: oklch(var(--lch-green-medium));
+
+      &::before {
+        background-color: oklch(var(--lch-green-medium));
+      }
+    }
+  }
+
+  .attachment__link {
+    --hover-size: 0;
+
+    color: var(--color-link);
+    text-decoration: underline;
+  }
+
+  /* Custom attachments such as mentions, etc. */
+  .attachment--custom {
+    display: inline;
+    padding: 0;
+    margin: 0;
+    white-space: normal;
+  }
+
+  .attachment--custom,
+  action-text-attachment[content-type^='application/vnd.actiontext'] {
+    --attachment-bg-color: transparent;
+    --attachment-image-size: 1em;
+    --attachment-text-color: var(--color-ink);
+
+    align-items: center;
+    color: var(--attachment-text-color);
+    display: inline-flex;
+    gap: 0.25ch;
+    position: relative;
+    vertical-align: bottom;
+
+    background: var(--attachment-bg-color);
+    box-shadow:
+      -0.25ch 0 0 var(--attachment-bg-color),
+       0.5ch 0 0 var(--attachment-bg-color);
+    border-radius: 99rem;
+
+    lexical-editor & {
+      cursor: pointer;
+    }
+
+    img {
+      block-size: var(--attachment-image-size);
+      border-radius: 50%;
+      inline-size: var(--attachment-image-size);
+    }
+
+    &.node--selected {
+      --attachment-bg-color: oklch(var(--lch-blue-dark));
+      --attachment-text-color: var(--color-ink-inverted);
+    }
+  }
 }
diff --git a/app/assets/stylesheets/terminals.css b/app/assets/stylesheets/terminals.css
index eaafbb11f..856011d41 100644
--- a/app/assets/stylesheets/terminals.css
+++ b/app/assets/stylesheets/terminals.css
@@ -204,4 +204,14 @@
       }
     }
   }
+
+  /* Lexical prompt insertions
+  /* ------------------------------------------------------------------------ */
+
+  .terminal {
+    .attachment--custom:not(.node--selected) {
+      --attachment-bg-color: oklch(var(--lch-white) / 15%);
+      --attachment-text-color: var(--color-terminal-text);
+    }
+  }
 }
diff --git a/app/views/prompts/commands/index.html.erb b/app/views/prompts/commands/index.html.erb
index fea432b9c..554b97f78 100644
--- a/app/views/prompts/commands/index.html.erb
+++ b/app/views/prompts/commands/index.html.erb
@@ -1,6 +1,6 @@
 <lexical-prompt-item search="assign cards to users">
   <template type="menu">
-    <code>/assign</code> - Assign cards to users
+    <code>/assign</code> Assign cards to users
   </template>
   <template type="editor">
     /assign @
@@ -9,7 +9,7 @@
 
 <lexical-prompt-item search="close cards">
   <template type="menu">
-    <code>/close</code> - Close cards
+    <code>/close</code> Close cards
   </template>
   <template type="editor">
     /close
@@ -18,7 +18,7 @@
 
 <lexical-prompt-item search="tag cards">
   <template type="menu">
-    <code>/tag</code> - Tag cards
+    <code>/tag</code> Tag cards
   </template>
   <template type="editor">
     /tag #