@diegopetrucci/pi-extensions 0.1.72 → 0.1.74

package/extensions/annotate-last-message/web/index.html

@@ -5,19 +5,45 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>annotate last message</title>
 <style>
+  /*
+   * Dark-neutral defaults. The injected theme block (see tlh-theme-vars below)
+   * overrides semantic and Markdown colours from ctx.ui.theme. When Pi's theme
+   * cannot provide a token, the matching dark/light fallback remains readable.
+   *
+   * The --md* fallback values below are kept in sync with the FALLBACK
+   * object in theme.ts so this template renders correctly when the injected
+   * theme block is absent (e.g. opened standalone in a browser for debugging).
+   */
   :root {
-    color-scheme: dark;
+    color-scheme: var(--color-scheme, dark);
+    --color-scheme: dark;
     --bg: #0d1117;
     --panel: #151b23;
     --panel-hover: #1f242c;
+    --inset: #0b1118;
     --border: #30363d;
+    --border-muted: #21262d;
     --text: #f0f6fc;
-    --muted: #9198a1;
-    --accent: #4493f8;
-    --accent-strong: #1f6feb;
-    --success: #238636;
-    --success-strong: #2ea043;
-    --danger: #da3633;
+    --muted: #8a8a8a;
+    --dim: #585858;
+    --accent: #f4c95d;
+    --success: #7ee787;
+    --error: #ffb3b3;
+    --warning: #f4c95d;
+
+    /* Markdown token colours — kept in sync with FALLBACK in theme.ts */
+    --mdHeading: #f4c95d;
+    --mdLink: #7dd3fc;
+    --mdLinkUrl: #8a8a8a;
+    --mdCode: #9b7bff;
+    --mdCodeBlock: inherit;
+    --mdCodeBlockBorder: #6f42c1;
+    --mdQuote: #8a8a8a;
+    --mdQuoteBorder: #6f42c1;
+    --mdHr: #585858;
+    --mdListBullet: #f4c95d;
+    --mdBold: inherit;
+    --mdItalic: inherit;
   }
 
   * { box-sizing: border-box; }
@@ -64,12 +90,12 @@
     border: 1px solid var(--border);
     border-radius: 8px;
     resize: vertical;
-    background: #0b1118;
+    background: var(--inset);
     color: var(--text);
   }
 
   textarea:focus {
-    outline: 2px solid rgba(68, 147, 248, 0.35);
+    outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
     border-color: var(--accent);
   }
 
@@ -77,7 +103,7 @@
   .page-footer {
     padding: 16px 20px;
     border-bottom: 1px solid var(--border);
-    background: rgba(13, 17, 23, 0.96);
+    background: var(--bg);
   }
 
   .page-footer {
@@ -171,9 +197,9 @@
   }
 
   .inline-toggle[data-active="true"] {
-    border-color: rgba(68, 147, 248, 0.45);
-    background: rgba(68, 147, 248, 0.12);
-    color: #c2ddff;
+    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
+    background: color-mix(in srgb, var(--accent) 12%, transparent);
+    color: var(--text);
   }
 
   .inline-editor {
@@ -181,7 +207,7 @@
     padding: 12px;
     border: 1px solid var(--border);
     border-radius: 10px;
-    background: rgba(1, 4, 9, 0.28);
+    background: var(--inset);
   }
 
   .inline-editor[hidden] {
@@ -212,7 +238,7 @@
     padding: 12px;
     border: 1px solid var(--border);
     border-radius: 10px;
-    background: rgba(1, 4, 9, 0.18);
+    background: var(--inset);
   }
 
   .section-card + .section-card {
@@ -223,7 +249,7 @@
     margin: 8px 0 10px;
     padding: 10px 12px;
     border-radius: 8px;
-    background: #0b1118;
+    background: var(--inset);
     font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
     white-space: pre-wrap;
     word-break: break-word;
@@ -243,24 +269,122 @@
   }
 
   .submit-button {
-    border-color: rgba(46, 160, 67, 0.5);
-    background: var(--success);
+    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
+    background: color-mix(in srgb, var(--accent) 20%, var(--panel));
   }
 
   .submit-button:hover:not(:disabled) {
-    background: var(--success-strong);
+    background: color-mix(in srgb, var(--accent) 32%, var(--panel));
   }
 
   .cancel-button:hover:not(:disabled) {
-    border-color: rgba(218, 54, 51, 0.45);
+    border-color: color-mix(in srgb, var(--muted) 45%, transparent);
   }
 
   .status[data-state="error"] {
-    color: #ffb3b3;
+    color: var(--error);
   }
 
   .status[data-state="ready"] {
-    color: #7ee787;
+    color: var(--success);
+  }
+
+  /* -------------------------------------------------------------------------
+   * Markdown token classes — consumed by the safe browser renderer.
+   * Mirrors upstream Pi's .markdown-content rules from
+   * dist/core/export-html/template.css, adapted for the 13px/1.6 monospace
+   * annotate-window context.
+   * --mdBold / --mdItalic are colour vars (typically "inherit"); actual bold /
+   * italic rendering uses font-weight / font-style.
+   * ------------------------------------------------------------------------- */
+
+  .markdown-content {
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .markdown-content h1,
+  .markdown-content h2,
+  .markdown-content h3,
+  .markdown-content h4,
+  .markdown-content h5,
+  .markdown-content h6 {
+    color: var(--mdHeading);
+    font-weight: bold;
+    margin: 0;
+  }
+
+  .markdown-content p { margin: 0; }
+  .markdown-content p + p { margin-top: 4px; }
+
+  .markdown-content a {
+    color: var(--mdLink);
+    text-decoration: underline;
+  }
+
+  /* Link URL shown beside or below the link text */
+  .markdown-content .md-link-url {
+    color: var(--mdLinkUrl);
+    font-size: 0.9em;
+    text-decoration: none;
+  }
+
+  .markdown-content code {
+    background: color-mix(in srgb, var(--text) 12%, var(--panel));
+    color: var(--mdCode);
+    padding: 0 3px;
+    border-radius: 3px;
+    font-family: inherit;
+  }
+
+  .markdown-content pre {
+    background: transparent;
+    margin: 4px 0;
+    overflow-x: auto;
+    border-left: 3px solid var(--mdCodeBlockBorder);
+    padding-left: 8px;
+  }
+
+  .markdown-content pre code {
+    display: block;
+    background: none;
+    color: var(--mdCodeBlock, var(--text));
+    padding: 0;
+  }
+
+  .markdown-content blockquote {
+    border-left: 3px solid var(--mdQuoteBorder);
+    padding-left: 8px;
+    margin: 4px 0;
+    color: var(--mdQuote);
+    font-style: italic;
+  }
+
+  .markdown-content ul,
+  .markdown-content ol {
+    margin: 4px 0;
+    padding-left: 1.5em;
+  }
+
+  .markdown-content li { margin: 0; }
+  .markdown-content li::marker { color: var(--mdListBullet); }
+
+  .markdown-content hr {
+    border: none;
+    border-top: 1px solid var(--mdHr);
+    margin: 6px 0;
+  }
+
+  /* Bold / italic: font-weight/font-style carry the visual emphasis;
+   * --mdBold / --mdItalic are colour vars (inherit for Pi's ANSI theme). */
+  .markdown-content strong {
+    font-weight: bold;
+    color: var(--mdBold);
+  }
+
+  .markdown-content em {
+    font-style: italic;
+    color: var(--mdItalic);
   }
 
   @media (max-width: 1100px) {
@@ -275,11 +399,13 @@
     }
   }
 </style>
+<!-- Live Pi theme vars — injected by ui.ts, overrides the static :root defaults above -->
+<style id="tlh-theme-vars">__INLINE_THEME__</style>
 </head>
 <body>
 <header class="page-header">
   <h1>Annotate last assistant message</h1>
-  <p>Review the latest assistant text, add inline or section notes, and submit a structured prompt back to the editor.</p>
+  <p>Review the latest assistant message, add notes, and submit feedback to the agent.</p>
 </header>
 
 <div class="layout">
@@ -307,7 +433,7 @@
 </div>
 
 <footer class="page-footer">
-  <p id="status" class="status">Add any feedback you want to send back to the editor.</p>
+  <p id="status" class="status">Add any feedback you want to send to the agent.</p>
   <div class="footer-actions">
     <button id="cancel-button" class="cancel-button" type="button">Cancel</button>
     <button id="submit-button" class="submit-button" type="button">Submit feedback</button>
@@ -316,6 +442,9 @@
 
 <script id="annotate-last-message-data" type="application/json">"__INLINE_DATA__"</script>
 <script>
+__INLINE_MD_RENDERER_JS__
+</script>
+<script>
 __INLINE_JS__
 </script>
 </body>