Add pkg locks

src-web/components/HeadersEditor.tsx

@@ -53,11 +53,18 @@ const valueAutocomplete = (headerName: string): GenericCompletionConfig | undefi
 
 const nameAutocomplete: PairEditorProps['nameAutocomplete'] = {
   minMatch: MIN_MATCH,
-  options: headerNames.map((t) => ({
-    label: t,
-    type: 'constant',
-    boost: 1, // Put above other completions
-  })),
+  options: headerNames.map((t) =>
+    typeof t === 'string'
+      ? {
+          label: t,
+          type: 'constant',
+          boost: 1, // Put above other completions
+        }
+      : {
+          ...t,
+          boost: 1, // Put above other completions
+        },
+  ),
 };
 
 const validateHttpHeader = (v: string) => {

src-web/components/core/Editor/Editor.tsx

@@ -215,7 +215,7 @@ const _Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
   const decoratedActions = useMemo(() => {
     const results = [];
     const actionClassName = classNames(
-      'transition-opacity opacity-0 group-hover:opacity-50 hover:!opacity-100 shadow',
+      'transition-opacity opacity-0 group-hover:opacity-80 hover:!opacity-100 shadow',
       bgClassList,
     );
 

src-web/components/core/Editor/genericCompletion.ts

@@ -3,6 +3,8 @@ import type { CompletionContext } from '@codemirror/autocomplete';
 export interface GenericCompletionOption {
   label: string;
   type: 'constant' | 'variable';
+  detail?: string;
+  info?: string;
   /** When given, should be a number from -99 to 99 that adjusts
    * how this completion is ranked compared to other completions
    * that match the input as well as this one. A negative number
@@ -26,7 +28,7 @@ export function genericCompletion({ options, minMatch = 1 }: GenericCompletionCo
     if (!matchedMinimumLength && !context.explicit) return null;
 
     const optionsWithoutExactMatches = options.filter((o) => o.label !== toMatch.text);
-    return { 
+    return {
       validFor: () => true, // Not really sure why this is all it needs
       from: toMatch.from,
       options: optionsWithoutExactMatches,

src-web/lib/data/headerNames.ts

@@ -1,12 +1,47 @@
-export const headerNames = [
-  'Content-Type',
-  'Content-Length',
-  'Accept',
-  'Accept-Charset',
-  'Accept-Encoding',
-  'Accept-Language',
-  'Accept-Datetime',
-  'Authorization',
+import type { GenericCompletionOption } from '../../components/core/Editor/genericCompletion';
+
+export const headerNames: (GenericCompletionOption | string)[] = [
+  {
+    type: 'constant',
+    label: 'Content-Type',
+    info: 'The original media type of the resource (prior to any content encoding applied for sending)',
+  },
+  {
+    type: 'constant',
+    label: 'Content-Length',
+    info: 'The size of the message body, in bytes, sent to the recipient',
+  },
+  {
+    type: 'constant',
+    label: 'Accept',
+    info:
+      'The content types, expressed as MIME types, the client is able to understand. ' +
+      'The server uses content negotiation to select one of the proposals and informs ' +
+      'the client of the choice with the Content-Type response header. Browsers set required ' +
+      'values for this header based on the context of the request. For example, a browser uses ' +
+      'different values in a request when fetching a CSS stylesheet, image, video, or a script.',
+  },
+  {
+    type: 'constant',
+    label: 'Accept-Encoding',
+    info:
+      'The content encoding (usually a compression algorithm) that the client can understand. ' +
+      'The server uses content negotiation to select one of the proposals and informs the client ' +
+      'of that choice with the Content-Encoding response header.',
+  },
+  {
+    type: 'constant',
+    label: 'Accept-Language',
+    info:
+      'The natural language and locale that the client prefers. The server uses content ' +
+      'negotiation to select one of the proposals and informs the client of the choice with ' +
+      'the Content-Language response header.',
+  },
+  {
+    type: 'constant',
+    label: 'Authorization',
+    info: 'Provide credentials that authenticate a user agent with a server, allowing access to a protected resource.',
+  },
   'Cache-Control',
   'Cookie',
   'Connection',