Customized look for autocomplete icons

Author: Relrin

packages/ui/src/features/editor/codicon-symbols.ts

@@ -0,0 +1,61 @@
+/**
+ * Vendored subset of VS Code Codicons — the `symbol-*` glyphs shown beside completion
+ * options, keyed by CodeMirror completion `type`. Monochrome 16×16 outline paths, rendered
+ * as CSS masks tinted by theme tokens (`cmTheme` in `editorTheme.ts`), so they recolour with
+ * the active theme and — unlike font/character icons.
+ *
+ * Icons © Microsoft, from https://github.com/microsoft/vscode-codicons (CC-BY-4.0).
+ * Re-extract from `src/icons/symbol-*.svg` upstream when refreshing; keep markup verbatim
+ * (some glyphs rely on `fill-rule="evenodd"`, which the mask alpha respects).
+ */
+
+const SYMBOL_METHOD = `<path d="M4.69684 5.04043C4.44303 4.93166 4.14909 5.04923 4.04031 5.30305C3.93153 5.55686 4.04911 5.8508 4.30292 5.95958L7.49988 7.3297V10.5C7.49988 10.7761 7.72374 11 7.99988 11C8.27603 11 8.49988 10.7761 8.49988 10.5V7.3297L11.6968 5.95958C11.9507 5.8508 12.0682 5.55686 11.9595 5.30305C11.8507 5.04923 11.5567 4.93166 11.3029 5.04043L7.99988 6.45602L4.69684 5.04043ZM9.07694 1.37855C8.38373 1.11193 7.61627 1.11193 6.92306 1.37855L1.96153 3.28683C1.38224 3.50964 1 4.06619 1 4.68685V11.3133C1 11.9339 1.38224 12.4905 1.96153 12.7133L6.92306 14.6216C7.61627 14.8882 8.38373 14.8882 9.07694 14.6216L14.0385 12.7133C14.6178 12.4905 15 11.9339 15 11.3133V4.68685C15 4.06619 14.6178 3.50964 14.0385 3.28683L9.07694 1.37855ZM7.28204 2.3119C7.74418 2.13415 8.25582 2.13415 8.71796 2.3119L13.6795 4.22018C13.8726 4.29445 14 4.47997 14 4.68685V11.3133C14 11.5201 13.8726 11.7057 13.6795 11.7799L8.71796 13.6882C8.25582 13.866 7.74418 13.866 7.28204 13.6882L2.32051 11.7799C2.12741 11.7057 2 11.5201 2 11.3133V4.68685C2 4.47997 2.12741 4.29445 2.32051 4.22018L7.28204 2.3119Z"/>`;
+
+const SYMBOL_CLASS = `<path d="M13.2069 10.4999C13.0194 10.3125 12.7651 10.2072 12.4999 10.2072C12.2348 10.2072 11.9805 10.3125 11.7929 10.4999L11.2929 10.9999H8.99994V6.99994H10.3629C10.2479 7.1876 10.1989 7.40832 10.2238 7.62701C10.2486 7.84571 10.3458 8.04983 10.4999 8.20694L11.2929 8.99994C11.4805 9.18741 11.7348 9.29273 11.9999 9.29273C12.2651 9.29273 12.5194 9.18741 12.7069 8.99994L13.9999 7.70694C14.1874 7.51941 14.2927 7.2651 14.2927 6.99994C14.2927 6.73478 14.1874 6.48047 13.9999 6.29294L13.2069 5.49994C13.0194 5.31247 12.7651 5.20715 12.4999 5.20715C12.2348 5.20715 11.9805 5.31247 11.7929 5.49994L11.2929 5.99994H6.70694L7.49994 5.20694C7.68741 5.01941 7.79273 4.7651 7.79273 4.49994C7.79273 4.23478 7.68741 3.98047 7.49994 3.79294L6.20694 2.49994C6.01941 2.31247 5.7651 2.20715 5.49994 2.20715C5.23478 2.20715 4.98047 2.31247 4.79294 2.49994L1.49994 5.79294C1.31247 5.98047 1.20715 6.23478 1.20715 6.49994C1.20715 6.7651 1.31247 7.01941 1.49994 7.20694L2.79294 8.49994C2.98047 8.68741 3.23478 8.79273 3.49994 8.79273C3.7651 8.79273 4.01941 8.68741 4.20694 8.49994L5.70694 6.99994H7.99994V11.4999C7.99994 11.6325 8.05262 11.7597 8.14639 11.8535C8.24015 11.9473 8.36733 11.9999 8.49994 11.9999H10.3629C10.2479 12.1876 10.1989 12.4083 10.2238 12.627C10.2486 12.8457 10.3458 13.0498 10.4999 13.2069L11.2929 13.9999C11.4805 14.1874 11.7348 14.2927 11.9999 14.2927C12.2651 14.2927 12.5194 14.1874 12.7069 13.9999L13.9999 12.7069C14.1874 12.5194 14.2927 12.2651 14.2927 11.9999C14.2927 11.7348 14.1874 11.4805 13.9999 11.2929L13.2069 10.4999ZM3.49994 7.79294L2.20694 6.49994L5.49994 3.20694L6.79294 4.49994L3.49994 7.79294ZM13.2929 6.99994L11.9999 8.29294L11.2069 7.49994L12.4999 6.20694L13.2929 6.99994ZM11.9999 13.2929L11.2069 12.4999L12.4999 11.2069L13.2929 11.9999L11.9999 13.2929Z"/>`;
+
+const SYMBOL_INTERFACE = `<path d="M11.5 4.5C9.742 4.5 8.296 5.808 8.051 7.5H4.929C4.705 6.64 3.929 6 3 6C1.897 6 1 6.897 1 8C1 9.103 1.897 10 3 10C3.929 10 4.705 9.36 4.929 8.5H8.051C8.296 10.192 9.742 11.5 11.5 11.5C13.43 11.5 15 9.93 15 8C15 6.07 13.43 4.5 11.5 4.5ZM3 9C2.448 9 2 8.551 2 8C2 7.449 2.448 7 3 7C3.552 7 4 7.449 4 8C4 8.551 3.552 9 3 9ZM11.5 10.5C10.121 10.5 9 9.378 9 8C9 6.622 10.121 5.5 11.5 5.5C12.879 5.5 14 6.622 14 8C14 9.378 12.879 10.5 11.5 10.5Z"/>`;
+
+const SYMBOL_PROPERTY = `<path d="M6.99989 5C6.99989 2.79086 8.79075 1 10.9999 1C11.5087 1 11.9964 1.09524 12.4454 1.26931C12.603 1.3304 12.719 1.46698 12.7539 1.63235C12.7888 1.79773 12.7377 1.96953 12.6182 2.08904L10.7072 4.00012L12.0001 5.29302L13.911 3.38207C14.0305 3.26254 14.2023 3.2115 14.3677 3.24637C14.5331 3.28125 14.6697 3.39732 14.7307 3.55493C14.9047 4.0038 14.9999 4.49138 14.9999 5C14.9999 7.20914 13.209 9 10.9999 9C10.6198 9 10.2514 8.94684 9.90215 8.84736L4.89566 13.9192C4.18171 14.6425 3.03692 14.7101 2.24289 14.0757C1.32876 13.3455 1.24088 11.9872 2.05327 11.1453L7.10411 5.91061C7.03588 5.61771 6.99989 5.31279 6.99989 5ZM10.9999 2C9.34303 2 7.99989 3.34315 7.99989 5C7.99989 5.31548 8.04841 5.61868 8.13805 5.90305C8.19313 6.07781 8.14821 6.26869 8.02099 6.40054L2.7729 11.8396C2.3696 12.2576 2.41323 12.9319 2.86703 13.2944C3.26123 13.6093 3.82955 13.5758 4.18398 13.2167L9.40817 7.9243C9.54702 7.78364 9.75569 7.73797 9.9406 7.80777C10.2693 7.93186 10.6261 8 10.9999 8C12.6567 8 13.9999 6.65685 13.9999 5C13.9999 4.9056 13.9955 4.81228 13.987 4.72023L12.3537 6.35368C12.2599 6.44745 12.1327 6.50013 12.0001 6.50013C11.8675 6.50013 11.7403 6.44745 11.6466 6.35368L9.64655 4.35368C9.45129 4.15842 9.45129 3.84185 9.64655 3.64658L11.2802 2.01289C11.188 2.00436 11.0945 2 10.9999 2Z"/>`;
+
+const SYMBOL_VARIABLE = `<path d="M11.279 5.78975L8.799 5.06575C8.59 5.00575 8.372 5.01475 8.168 5.08975L4.648 6.40975C4.26 6.55575 4 6.93175 4 7.34675V9.13975C4 9.57075 4.274 9.95175 4.684 10.0877L7.165 10.9147C7.268 10.9497 7.376 10.9667 7.483 10.9667C7.611 10.9667 7.739 10.9427 7.859 10.8937L11.376 9.46475C11.755 9.31175 12 8.94775 12 8.53875V6.74975C12 6.30775 11.703 5.91275 11.279 5.78975ZM11 8.53875L7.483 9.96775L5 9.13975V7.34675L8.521 6.02675L11 6.75075V8.53975V8.53875ZM7.48 7.46675L8.807 6.91375C9.06 6.80875 9.355 6.92775 9.461 7.18275C9.566 7.43775 9.446 7.73075 9.191 7.83675L7.999 8.33375V8.62575C7.999 8.90175 7.775 9.12575 7.499 9.12575C7.223 9.12575 6.999 8.90175 6.999 8.62575V8.36075L6.591 8.22475C6.329 8.13775 6.188 7.85475 6.275 7.59275C6.364 7.33075 6.647 7.19175 6.908 7.27675L7.48 7.46675Z"/><path d="M12.5 14H11.5C11.224 14 11 13.776 11 13.5C11 13.224 11.224 13 11.5 13H12.5C12.776 13 13 12.775 13 12.5V3.5C13 3.225 12.776 3 12.5 3H11.5C11.224 3 11 2.776 11 2.5C11 2.224 11.224 2 11.5 2H12.5C13.327 2 14 2.673 14 3.5V12.5C14 13.327 13.327 14 12.5 14ZM5 13.5C5 13.224 4.776 13 4.5 13H3.5C3.224 13 3 12.775 3 12.5V3.5C3 3.225 3.224 3 3.5 3H4.5C4.776 3 5 2.776 5 2.5C5 2.224 4.776 2 4.5 2H3.5C2.673 2 2 2.673 2 3.5V12.5C2 13.327 2.673 14 3.5 14H4.5C4.776 14 5 13.776 5 13.5Z"/>`;
+
+const SYMBOL_CONSTANT = `<path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 2C3.83696 2 3.20107 2.26339 2.73223 2.73223C2.26339 3.20107 2 3.83696 2 4.5V11.5C2 12.163 2.26339 12.7989 2.73223 13.2678C3.20107 13.7366 3.83696 14 4.5 14H11.5C12.163 14 12.7989 13.7366 13.2678 13.2678C13.7366 12.7989 14 12.163 14 11.5V4.5C14 3.83696 13.7366 3.20107 13.2678 2.73223C12.7989 2.26339 12.163 2 11.5 2H4.5ZM3 4.5C3 4.10218 3.15804 3.72064 3.43934 3.43934C3.72064 3.15804 4.10218 3 4.5 3H11.5C11.8978 3 12.2794 3.15804 12.5607 3.43934C12.842 3.72064 13 4.10218 13 4.5V11.5C13 11.8978 12.842 12.2794 12.5607 12.5607C12.2794 12.842 11.8978 13 11.5 13H4.5C4.10218 13 3.72064 12.842 3.43934 12.5607C3.15804 12.2794 3 11.8978 3 11.5V4.5Z"/><path d="M5 6.5C5 6.36739 5.05268 6.24021 5.14645 6.14645C5.24021 6.05268 5.36739 6 5.5 6H10.5C10.6326 6 10.7598 6.05268 10.8536 6.14645C10.9473 6.24021 11 6.36739 11 6.5C11 6.63261 10.9473 6.75979 10.8536 6.85355C10.7598 6.94732 10.6326 7 10.5 7H5.5C5.36739 7 5.24021 6.94732 5.14645 6.85355C5.05268 6.75979 5 6.63261 5 6.5ZM10.5 9H5.5C5.36739 9 5.24021 9.05268 5.14645 9.14645C5.05268 9.24021 5 9.36739 5 9.5C5 9.63261 5.05268 9.75979 5.14645 9.85355C5.24021 9.94732 5.36739 10 5.5 10H10.5C10.6326 10 10.7598 9.94732 10.8536 9.85355C10.9473 9.75979 11 9.63261 11 9.5C11 9.36739 10.9473 9.24021 10.8536 9.14645C10.7598 9.05268 10.6326 9 10.5 9Z"/>`;
+
+const SYMBOL_ENUM = `<path d="M15 3.5V7.5C15 7.9 14.85 8.28 14.56 8.56C14.28 8.84 13.9 9 13.5 9H11V8.5C11 8.33 10.98 8.16 10.95 8H13.5C13.63 8 13.76 7.95 13.85 7.85C13.95 7.76 14 7.63 14 7.5V3.5C14 3.37 13.95 3.24 13.85 3.15C13.76 3.05 13.63 3 13.5 3H7.5C7.37 3 7.24 3.05 7.15 3.15C7.05 3.24 7 3.37 7 3.5V6H6V3.5C6 3.1 6.16 2.72 6.44 2.44C6.72 2.16 7.1 2 7.5 2H13.5C13.9 2 14.28 2.16 14.56 2.44C14.84 2.72 15 3.1 15 3.5ZM12.5 5C12.776 5 13 4.776 13 4.5C13 4.224 12.776 4 12.5 4H8.5C8.224 4 8 4.224 8 4.5C8 4.776 8.224 5 8.5 5H12.5ZM13 6.5C13 6.22 12.78 6 12.5 6H8.5C9.32 6 10.04 6.39 10.5 7H12.5C12.78 7 13 6.78 13 6.5ZM7.5 9H3.5C3.224 9 3 9.224 3 9.5C3 9.776 3.224 10 3.5 10H7.5C7.776 10 8 9.776 8 9.5C8 9.224 7.776 9 7.5 9ZM7.5 11H3.5C3.224 11 3 11.224 3 11.5C3 11.776 3.224 12 3.5 12H7.5C7.776 12 8 11.776 8 11.5C8 11.224 7.776 11 7.5 11ZM10 8.5V12.5C10 13.327 9.327 14 8.5 14H2.5C1.673 14 1 13.327 1 12.5V8.5C1 7.673 1.673 7 2.5 7H8.5C9.327 7 10 7.673 10 8.5ZM9 8.5C9 8.225 8.775 8 8.5 8H2.5C2.225 8 2 8.225 2 8.5V12.5C2 12.775 2.225 13 2.5 13H8.5C8.775 13 9 12.775 9 12.5V8.5Z"/>`;
+
+const SYMBOL_PARAMETER = `<path d="M4 3.5C4 3.22386 4.22386 3 4.5 3H11.5C11.7761 3 12 3.22386 12 3.5V4.5C12 4.77614 11.7761 5 11.5 5C11.2239 5 11 4.77614 11 4.5V4H8.5V12H9C9.27614 12 9.5 12.2239 9.5 12.5C9.5 12.7761 9.27614 13 9 13H7C6.72386 13 6.5 12.7761 6.5 12.5C6.5 12.2239 6.72386 12 7 12H7.5V4H5V4.5C5 4.77614 4.77614 5 4.5 5C4.22386 5 4 4.77614 4 4.5V3.5ZM4.35355 6.64645C4.54882 6.84171 4.54882 7.15829 4.35355 7.35355L2.20711 9.5L4.35355 11.6464C4.54882 11.8417 4.54882 12.1583 4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536L1.14645 9.85355C0.951184 9.65829 0.951184 9.34171 1.14645 9.14645L3.64645 6.64645C3.84171 6.45118 4.15829 6.45118 4.35355 6.64645ZM14.8536 9.14645L12.3536 6.64645C12.1583 6.45118 11.8417 6.45118 11.6464 6.64645C11.4512 6.84171 11.4512 7.15829 11.6464 7.35355L13.7929 9.5L11.6464 11.6464C11.4512 11.8417 11.4512 12.1583 11.6464 12.3536C11.8417 12.5488 12.1583 12.5488 12.3536 12.3536L14.8536 9.85355C15.0488 9.65829 15.0488 9.34171 14.8536 9.14645Z"/>`;
+
+const SYMBOL_KEYWORD = `<path d="M9.5 14C9.77614 14 10 14.2239 10 14.5C10 14.7761 9.77614 15 9.5 15H2.5C2.22386 15 2 14.7761 2 14.5C2 14.2239 2.22386 14 2.5 14H9.5Z"/><path d="M6.5 11C6.77614 11 7 11.2239 7 11.5C7 11.7761 6.77614 12 6.5 12H2.5C2.22386 12 2 11.7761 2 11.5C2 11.2239 2.22386 11 2.5 11H6.5Z"/><path d="M13.5 11C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H8.5C8.22386 12 8 11.7761 8 11.5C8 11.2239 8.22386 11 8.5 11H13.5Z"/><path d="M8.5 8C8.77614 8 9 8.22386 9 8.5C9 8.77614 8.77614 9 8.5 9H2.5C2.22386 9 2 8.77614 2 8.5C2 8.22386 2.22386 8 2.5 8H8.5Z"/><path d="M13.5 8C13.7761 8 14 8.22386 14 8.5C14 8.77614 13.7761 9 13.5 9H10.5C10.2239 9 10 8.77614 10 8.5C10 8.22386 10.2239 8 10.5 8H13.5Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9 2C9.55228 2 10 2.44772 10 3V5C10 5.55228 9.55228 6 9 6H3C2.44772 6 2 5.55228 2 5V3C2 2.44772 2.44772 2 3 2H9ZM3 5H9V3H3V5Z"/><path d="M13.5 4C13.7761 4 14 4.22386 14 4.5C14 4.77614 13.7761 5 13.5 5H11.5C11.2239 5 11 4.77614 11 4.5C11 4.22386 11.2239 4 11.5 4H13.5Z"/>`;
+
+const SYMBOL_NAMESPACE = `<path d="M5 2C3.89543 2 3 2.89543 3 4V6.00469C3 6.53494 2.99231 6.79889 2.91088 7.00209C2.84826 7.15835 2.71576 7.33309 2.2764 7.55276C2.10701 7.63745 2 7.81058 2 7.99997C2 8.18935 2.10699 8.36249 2.27638 8.44719C2.71569 8.66685 2.84809 8.84151 2.91076 8.99819C2.99233 9.20211 3 9.46732 3 10L3 12C3 13.1046 3.89543 14 5 14C5.27614 14 5.5 13.7761 5.5 13.5C5.5 13.2239 5.27614 13 5 13C4.44772 13 4 12.5523 4 12L4.00003 9.94145C4.00033 9.49235 4.00065 9.03033 3.83924 8.6268C3.74212 8.384 3.59654 8.17962 3.40072 8.00002C3.59646 7.82057 3.74199 7.61645 3.83912 7.37408C4.00065 6.971 4.00033 6.51001 4.00003 6.063L4 4C4 3.44772 4.44772 3 5 3C5.27614 3 5.5 2.77614 5.5 2.5C5.5 2.22386 5.27614 2 5 2ZM11 2C12.1046 2 13 2.89543 13 4V6.00469C13 6.53494 13.0077 6.79889 13.0891 7.00209C13.1517 7.15835 13.2842 7.33309 13.7236 7.55276C13.893 7.63745 14 7.81058 14 7.99997C14 8.18935 13.893 8.36249 13.7236 8.44719C13.2843 8.66685 13.1519 8.84151 13.0892 8.99819C13.0077 9.20211 13 9.46732 13 10V12C13 13.1046 12.1046 14 11 14C10.7239 14 10.5 13.7761 10.5 13.5C10.5 13.2239 10.7239 13 11 13C11.5523 13 12 12.5523 12 12L12 9.94145C11.9997 9.49235 11.9994 9.03033 12.1608 8.6268C12.2579 8.384 12.4035 8.17962 12.5993 8.00002C12.4035 7.82057 12.258 7.61645 12.1609 7.37408C11.9993 6.971 11.9997 6.51001 12 6.063L12 4C12 3.44772 11.5523 3 11 3C10.7239 3 10.5 2.77614 10.5 2.5C10.5 2.22386 10.7239 2 11 2Z"/>`;
+
+const SYMBOL_STRING = `<path fill-rule="evenodd" clip-rule="evenodd" d="M8.00098 5.5C7.63498 5.5 7.29598 5.619 7.00098 5.813V4.5C7.00098 4.224 6.77698 4 6.50098 4C6.22498 4 6.00098 4.224 6.00098 4.5V9.5C6.00098 9.776 6.22498 10 6.50098 10C6.71798 10 6.89798 9.86 6.96698 9.666C7.26998 9.873 7.62098 10 8.00098 10C9.10398 10 10.001 8.991 10.001 7.75C10.001 6.509 9.10398 5.5 8.00098 5.5ZM8.00098 9C7.44898 9 7.00098 8.439 7.00098 7.75C7.00098 7.061 7.44898 6.5 8.00098 6.5C8.55298 6.5 9.00098 7.061 9.00098 7.75C9.00098 8.439 8.55298 9 8.00098 9Z"/><path d="M12.749 10C11.646 10 10.749 8.991 10.749 7.75C10.749 6.509 11.646 5.5 12.749 5.5C12.892 5.5 14.001 5.605 14.001 6.236C14.001 6.511 13.777 6.736 13.5 6.736C13.3671 6.736 13.2817 6.68604 13.1896 6.6321C13.0814 6.5688 12.9639 6.5 12.749 6.5C12.197 6.5 11.749 7.061 11.749 7.75C11.749 8.439 12.197 9 12.749 9C12.9613 9 13.0789 8.93181 13.1874 8.8689C13.2804 8.81502 13.3667 8.765 13.5 8.765C13.779 8.765 14.001 8.992 14.001 9.264C14.001 9.897 12.887 10 12.749 10Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M1.89798 5.646C1.99098 5.553 2.36398 5.25 3.25198 5.25C4.12198 5.25 5.00098 5.765 5.00098 6.75V9.5C5.00098 9.776 4.77698 10 4.50098 10C4.36198 10 4.23698 9.943 4.14598 9.851C3.91198 9.937 3.62298 10 3.25098 10C1.93798 10 1.25098 9.246 1.25098 8.5C1.25098 7.754 1.93798 7 3.25098 7C3.55298 7 3.79698 7.023 4.00098 7.056V6.75C4.00098 6.256 3.28098 6.25 3.25098 6.25C2.78847 6.25 2.60167 6.36312 2.57928 6.37668L2.57698 6.378C2.38098 6.573 2.07798 6.561 1.88398 6.365C1.68898 6.17 1.70298 5.841 1.89798 5.646ZM3.25198 8C2.60298 8 2.25198 8.258 2.25198 8.5C2.25198 8.742 2.60298 9 3.25198 9C3.69898 9 3.90898 8.885 4.00198 8.811V8.074C3.85798 8.038 3.62398 8 3.25198 8Z"/>`;
+
+export interface CompletionIcon {
+  /** Inner SVG markup (one or more <path> elements, 16×16 viewBox). */
+  body: string;
+  /** Theme token the mask is tinted with — mirrors the syntax-highlight palette. */
+  token: string;
+}
+
+/** CodeMirror completion `type` → codicon. Covers every type @codemirror/lsp-client emits. */
+export const COMPLETION_ICONS: Readonly<Record<string, CompletionIcon>> = {
+  function: { body: SYMBOL_METHOD, token: "--mod" },
+  method: { body: SYMBOL_METHOD, token: "--mod" },
+  class: { body: SYMBOL_CLASS, token: "--info" },
+  interface: { body: SYMBOL_INTERFACE, token: "--info" },
+  type: { body: SYMBOL_PARAMETER, token: "--info" },
+  enum: { body: SYMBOL_ENUM, token: "--info" },
+  namespace: { body: SYMBOL_NAMESPACE, token: "--info" },
+  property: { body: SYMBOL_PROPERTY, token: "--accent" },
+  keyword: { body: SYMBOL_KEYWORD, token: "--accent" },
+  variable: { body: SYMBOL_VARIABLE, token: "--ink-1" },
+  constant: { body: SYMBOL_CONSTANT, token: "--del" },
+  text: { body: SYMBOL_STRING, token: "--ink-3" },
+};
+
+/** CSS `url(...)` data-URI for an icon, usable as a `mask-image` value. */
+export function completionIconMaskUrl(icon: CompletionIcon): string {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">${icon.body}</svg>`;
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}

packages/ui/src/features/editor/editor.css

@@ -248,21 +248,13 @@
   background: transparent;
 }
 
-/* Editor popovers (autocomplete list, completion docs, LSP signature/reference surfaces) get
-   the same slim scrollbar as the session / diff screens. */
-.cm-tooltip-autocomplete > ul,
-.cm-tooltip.cm-completionInfo,
-.cm-lsp-signature-tooltip,
-.cm-lsp-reference-panel {
-  scrollbar-width: thin;
-  scrollbar-color: var(--bg-3) transparent;
-}
+/* Editor popovers (autocomplete list, completion docs, LSP signature/reference surfaces) */
 .cm-tooltip-autocomplete > ul::-webkit-scrollbar,
 .cm-tooltip.cm-completionInfo::-webkit-scrollbar,
 .cm-lsp-signature-tooltip::-webkit-scrollbar,
 .cm-lsp-reference-panel::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: 10px;
+  height: 10px;
 }
 .cm-tooltip-autocomplete > ul::-webkit-scrollbar-track,
 .cm-tooltip.cm-completionInfo::-webkit-scrollbar-track,
@@ -276,6 +268,9 @@
 .cm-lsp-reference-panel::-webkit-scrollbar-thumb {
   background: var(--bg-3);
   border-radius: 3px;
+  /* Inset the thumb so the wider track keeps the slim look of the other surfaces. */
+  border: 2px solid transparent;
+  background-clip: padding-box;
 }
 .cm-tooltip-autocomplete > ul::-webkit-scrollbar-thumb:hover,
 .cm-tooltip.cm-completionInfo::-webkit-scrollbar-thumb:hover,

packages/ui/src/features/editor/editorTheme.ts

@@ -2,6 +2,7 @@ import { HighlightStyle } from "@codemirror/language";
 import type { Extension } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import { tags as t } from "@lezer/highlight";
+import { COMPLETION_ICONS, completionIconMaskUrl } from "./codicon-symbols.js";
 
 /**
  * CodeMirror chrome theme + syntax highlight style, both expressed against pi-deck's CSS custom
@@ -80,20 +81,65 @@ export function cmTheme(dark: boolean): Extension {
         color: "var(--ink-1)",
         boxShadow: "var(--shadow-pop)",
       },
+      ".cm-tooltip.cm-tooltip-autocomplete > ul": {
+        minWidth: "320px",
+        maxWidth: "min(700px, 90vw)",
+        maxHeight: "22em",
+      },
+      ".cm-tooltip.cm-tooltip-autocomplete > ul > li": {
+        padding: "4px 8px",
+        lineHeight: "1.4",
+      },
       ".cm-tooltip-autocomplete ul li": {
         fontFamily: "var(--font-mono)",
       },
       ".cm-tooltip-autocomplete ul li[aria-selected]": {
         backgroundColor: "var(--accent-soft)",
         color: "var(--accent)",
       },
+      // Docs panel beside the completion list.
+      ".cm-tooltip.cm-completionInfo": {
+        maxWidth: "min(480px, 70vw)",
+        maxHeight: "22em",
+        overflowY: "auto",
+        padding: "6px 10px",
+      },
       ".cm-completionLabel": { color: "var(--ink-1)" },
       ".cm-completionDetail": { color: "var(--ink-3)" },
+      ".cm-completionIcon": {
+        width: "1.1em",
+        paddingRight: ".5em",
+        fontStyle: "normal",
+        fontSize: "85%",
+        textAlign: "center",
+        opacity: "0.9",
+      },
+      ".cm-completionIcon:after": { content: "'·'", color: "var(--ink-3)" },
+      ...COMPLETION_ICON_RULES,
     },
     { dark },
   );
 }
 
+/**
+ * One rule per completion kind: an empty pseudo-element sized to the row, with the codicon
+ * as a mask over a token-coloured background
+ */
+const COMPLETION_ICON_RULES: Record<string, Record<string, string>> = Object.fromEntries(
+  Object.entries(COMPLETION_ICONS).map(([type, icon]) => [
+    `.cm-completionIcon-${type}:after`,
+    {
+      content: "''",
+      display: "inline-block",
+      width: "1em",
+      height: "1em",
+      verticalAlign: "text-bottom",
+      backgroundColor: `var(${icon.token})`,
+      mask: `${completionIconMaskUrl(icon)} center / contain no-repeat`,
+    },
+  ]),
+);
+
 const highlight = HighlightStyle.define([
   {
     tag: [t.keyword, t.controlKeyword, t.moduleKeyword, t.operatorKeyword],