Template Tag Function Editor (#67)

![CleanShot 2024-08-15 at 16 53
09@2x](https://github.com/user-attachments/assets/8c0eb655-1daf-4dc8-811f-f606c770f7dc)

src-web/components/GlobalHooks.tsx

@@ -1,18 +1,19 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
 import type { Model } from '@yaakapp/api';
+import { useSetAtom } from 'jotai';
 import { useEffect } from 'react';
 import { useEnsureActiveCookieJar, useMigrateActiveCookieJarId } from '../hooks/useActiveCookieJar';
 import { useActiveWorkspaceChangedToast } from '../hooks/useActiveWorkspaceChangedToast';
 import { cookieJarsQueryKey } from '../hooks/useCookieJars';
 import { useCopy } from '../hooks/useCopy';
-import { environmentsQueryKey } from '../hooks/useEnvironments';
+import { environmentsAtom } from '../hooks/useEnvironments';
 import { foldersQueryKey } from '../hooks/useFolders';
 import { grpcConnectionsQueryKey } from '../hooks/useGrpcConnections';
 import { grpcEventsQueryKey } from '../hooks/useGrpcEvents';
-import { grpcRequestsQueryKey } from '../hooks/useGrpcRequests';
+import { grpcRequestsAtom } from '../hooks/useGrpcRequests';
 import { useHotKey } from '../hooks/useHotKey';
-import { httpRequestsQueryKey } from '../hooks/useHttpRequests';
+import { httpRequestsAtom } from '../hooks/useHttpRequests';
 import { httpResponsesQueryKey } from '../hooks/useHttpResponses';
 import { keyValueQueryKey } from '../hooks/useKeyValue';
 import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
@@ -25,7 +26,7 @@ import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
 import { settingsQueryKey, useSettings } from '../hooks/useSettings';
 import { useSyncThemeToDocument } from '../hooks/useSyncThemeToDocument';
 import { useToggleCommandPalette } from '../hooks/useToggleCommandPalette';
-import { workspacesQueryKey } from '../hooks/useWorkspaces';
+import { workspacesAtom } from '../hooks/useWorkspaces';
 import { useZoom } from '../hooks/useZoom';
 import { extractKeyValue } from '../lib/keyValueStore';
 import { modelsEq } from '../lib/models';
@@ -64,25 +65,22 @@ export function GlobalHooks() {
     windowLabel: string;
   }
 
+  const setWorkspaces = useSetAtom(workspacesAtom);
+  const setHttpRequests = useSetAtom(httpRequestsAtom);
+  const setGrpcRequests = useSetAtom(grpcRequestsAtom);
+  const setEnvironments = useSetAtom(environmentsAtom);
+
   useListenToTauriEvent<ModelPayload>('upserted_model', ({ payload }) => {
     const { model, windowLabel } = payload;
     const queryKey =
-      model.model === 'http_request'
-        ? httpRequestsQueryKey(model)
-        : model.model === 'http_response'
+      model.model === 'http_response'
         ? httpResponsesQueryKey(model)
         : model.model === 'folder'
         ? foldersQueryKey(model)
-        : model.model === 'environment'
-        ? environmentsQueryKey(model)
         : model.model === 'grpc_connection'
         ? grpcConnectionsQueryKey(model)
         : model.model === 'grpc_event'
         ? grpcEventsQueryKey(model)
-        : model.model === 'grpc_request'
-        ? grpcRequestsQueryKey(model)
-        : model.model === 'workspace'
-        ? workspacesQueryKey(model)
         : model.model === 'key_value'
         ? keyValueQueryKey(model)
         : model.model === 'cookie_jar'
@@ -91,11 +89,6 @@ export function GlobalHooks() {
         ? settingsQueryKey()
         : null;
 
-    if (queryKey === null) {
-      console.log('Unrecognized updated model:', model);
-      return;
-    }
-
     if (model.model === 'http_request' && windowLabel !== getCurrentWebviewWindow().label) {
       wasUpdatedExternally(model.id);
     }
@@ -106,21 +99,27 @@ export function GlobalHooks() {
 
     if (shouldIgnoreModel(model, windowLabel)) return;
 
-    queryClient.setQueryData(queryKey, (current: unknown) => {
-      if (model.model === 'key_value') {
-        // Special-case for KeyValue
-        return extractKeyValue(model);
-      }
-
-      if (Array.isArray(current)) {
-        const index = current.findIndex((v) => modelsEq(v, model)) ?? -1;
-        if (index >= 0) {
-          return [...current.slice(0, index), model, ...current.slice(index + 1)];
-        } else {
-          return pushToFront ? [model, ...(current ?? [])] : [...(current ?? []), model];
+    if (model.model === 'workspace') {
+      setWorkspaces(updateModelList(model, pushToFront));
+    } else if (model.model === 'http_request') {
+      setHttpRequests(updateModelList(model, pushToFront));
+    } else if (model.model === 'grpc_request') {
+      setGrpcRequests(updateModelList(model, pushToFront));
+    } else if (model.model === 'environment') {
+      setEnvironments(updateModelList(model, pushToFront));
+    } else if (queryKey != null) {
+      // TODO: Convert all models to use Jotai
+      queryClient.setQueryData(queryKey, (current: unknown) => {
+        if (model.model === 'key_value') {
+          // Special-case for KeyValue
+          return extractKeyValue(model);
         }
-      }
-    });
+
+        if (Array.isArray(current)) {
+          return updateModelList(model, pushToFront)(current);
+        }
+      });
+    }
   });
 
   useListenToTauriEvent<ModelPayload>('deleted_model', ({ payload }) => {
@@ -128,17 +127,17 @@ export function GlobalHooks() {
     if (shouldIgnoreModel(model, windowLabel)) return;
 
     if (model.model === 'workspace') {
-      queryClient.setQueryData(workspacesQueryKey(), removeById(model));
+      setWorkspaces(removeById(model));
     } else if (model.model === 'http_request') {
-      queryClient.setQueryData(httpRequestsQueryKey(model), removeById(model));
+      setHttpRequests(removeById(model));
     } else if (model.model === 'http_response') {
       queryClient.setQueryData(httpResponsesQueryKey(model), removeById(model));
     } else if (model.model === 'folder') {
       queryClient.setQueryData(foldersQueryKey(model), removeById(model));
     } else if (model.model === 'environment') {
-      queryClient.setQueryData(environmentsQueryKey(model), removeById(model));
+      setEnvironments(removeById(model));
     } else if (model.model === 'grpc_request') {
-      queryClient.setQueryData(grpcRequestsQueryKey(model), removeById(model));
+      setGrpcRequests(removeById(model));
     } else if (model.model === 'grpc_connection') {
       queryClient.setQueryData(grpcConnectionsQueryKey(model), removeById(model));
     } else if (model.model === 'grpc_event') {
@@ -192,8 +191,19 @@ export function GlobalHooks() {
   return null;
 }
 
+function updateModelList<T extends Model>(model: T, pushToFront: boolean) {
+  return (current: T[]): T[] => {
+    const index = current.findIndex((v) => modelsEq(v, model)) ?? -1;
+    if (index >= 0) {
+      return [...current.slice(0, index), model, ...current.slice(index + 1)];
+    } else {
+      return pushToFront ? [model, ...(current ?? [])] : [...(current ?? []), model];
+    }
+  };
+}
+
 function removeById<T extends { id: string }>(model: T) {
-  return (entries: T[] | undefined) => entries?.filter((e) => e.id !== model.id);
+  return (entries: T[] | undefined) => entries?.filter((e) => e.id !== model.id) ?? [];
 }
 
 const shouldIgnoreModel = (payload: Model, windowLabel: string) => {

src-web/components/IsDev.tsx

@@ -7,7 +7,7 @@ interface Props {
 
 export function IsDev({ children }: Props) {
   const appInfo = useAppInfo();
-  if (!appInfo?.isDev) {
+  if (!appInfo.isDev) {
     return null;
   }
 

src-web/components/MoveToWorkspaceDialog.tsx

@@ -1,13 +1,10 @@
-import { useQueryClient } from '@tanstack/react-query';
+import type { GrpcRequest, HttpRequest } from '@yaakapp/api';
 import React, { useState } from 'react';
 import { useAppRoutes } from '../hooks/useAppRoutes';
-import { grpcRequestsQueryKey } from '../hooks/useGrpcRequests';
-import { httpRequestsQueryKey } from '../hooks/useHttpRequests';
 import { useUpdateAnyGrpcRequest } from '../hooks/useUpdateAnyGrpcRequest';
 import { useUpdateAnyHttpRequest } from '../hooks/useUpdateAnyHttpRequest';
 import { useWorkspaces } from '../hooks/useWorkspaces';
 import { fallbackRequestName } from '../lib/fallbackRequestName';
-import type { GrpcRequest, HttpRequest } from '@yaakapp/api';
 import { Button } from './core/Button';
 import { InlineCode } from './core/InlineCode';
 import { Select } from './core/Select';
@@ -22,7 +19,6 @@ interface Props {
 
 export function MoveToWorkspaceDialog({ onDone, request, activeWorkspaceId }: Props) {
   const workspaces = useWorkspaces();
-  const queryClient = useQueryClient();
   const updateHttpRequest = useUpdateAnyHttpRequest();
   const updateGrpcRequest = useUpdateAnyGrpcRequest();
   const toast = useToast();
@@ -52,14 +48,8 @@ export function MoveToWorkspaceDialog({ onDone, request, activeWorkspaceId }: Pr
 
           if (request.model === 'http_request') {
             await updateHttpRequest.mutateAsync(args);
-            await queryClient.invalidateQueries({
-              queryKey: httpRequestsQueryKey({ workspaceId: activeWorkspaceId }),
-            });
           } else if (request.model === 'grpc_request') {
             await updateGrpcRequest.mutateAsync(args);
-            await queryClient.invalidateQueries({
-              queryKey: grpcRequestsQueryKey({ workspaceId: activeWorkspaceId }),
-            });
           }
 
           // Hide after a moment, to give time for request to disappear

src-web/components/Settings/SettingsGeneral.tsx

@@ -117,9 +117,9 @@ export function SettingsGeneral() {
 
       <Heading size={2}>App Info</Heading>
       <KeyValueRows>
-        <KeyValueRow label="Version" value={appInfo?.version} />
-        <KeyValueRow label="Data Directory" value={appInfo?.appDataDir} />
-        <KeyValueRow label="Logs Directory" value={appInfo?.appLogDir} />
+        <KeyValueRow label="Version" value={appInfo.version} />
+        <KeyValueRow label="Data Directory" value={appInfo.appDataDir} />
+        <KeyValueRow label="Logs Directory" value={appInfo.appLogDir} />
       </KeyValueRows>
     </VStack>
   );

src-web/components/SettingsDropdown.tsx

@@ -73,7 +73,7 @@ export function SettingsDropdown() {
           leftSlot: <Icon icon="folderOutput" />,
           onSelect: () => exportData.mutate(),
         },
-        { type: 'separator', label: `Yaak v${appInfo?.version}` },
+        { type: 'separator', label: `Yaak v${appInfo.version}` },
         {
           key: 'update-check',
           label: 'Check for Updates',
@@ -92,7 +92,7 @@ export function SettingsDropdown() {
           label: 'Changelog',
           leftSlot: <Icon icon="cake" />,
           rightSlot: <Icon icon="externalLink" />,
-          onSelect: () => open(`https://yaak.app/changelog/${appInfo?.version}`),
+          onSelect: () => open(`https://yaak.app/changelog/${appInfo.version}`),
         },
       ]}
     >

src-web/components/Sidebar.tsx

@@ -1,4 +1,4 @@
-import type { Folder, GrpcRequest, HttpRequest, Workspace } from '@yaakapp/api';
+import type { Folder, GrpcRequest, HttpRequest, Model, Workspace } from '@yaakapp/api';
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
 import React, { Fragment, useCallback, useMemo, useRef, useState } from 'react';
@@ -576,7 +576,7 @@ type SidebarItemProps = {
   itemId: string;
   itemName: string;
   itemFallbackName: string;
-  itemModel: string;
+  itemModel: Model['model'];
   itemPrefix: ReactNode;
   useProminentStyles?: boolean;
   selected: boolean;
@@ -658,8 +658,10 @@ function SidebarItem({
   const sendRequest = useSendAnyHttpRequest();
   const moveToWorkspace = useMoveToWorkspace(itemId);
   const sendManyRequests = useSendManyRequests();
-  const latestHttpResponse = useLatestHttpResponse(itemId);
-  const latestGrpcConnection = useLatestGrpcConnection(itemId);
+  const latestHttpResponse = useLatestHttpResponse(itemModel === 'http_request' ? itemId : null);
+  const latestGrpcConnection = useLatestGrpcConnection(
+    itemModel === 'grpc_request' ? itemId : null,
+  );
   const updateHttpRequest = useUpdateAnyHttpRequest();
   const workspaces = useWorkspaces();
   const updateGrpcRequest = useUpdateAnyGrpcRequest();

src-web/components/TemplateFunctionDialog.tsx

@@ -0,0 +1,211 @@
+import { useCallback, useMemo, useState } from 'react';
+import type { FnArg } from '../gen/FnArg';
+import type { Tokens } from '../gen/Tokens';
+import { useHttpRequests } from '../hooks/useHttpRequests';
+import { useRenderTemplate } from '../hooks/useRenderTemplate';
+import type {
+  TemplateFunction,
+  TemplateFunctionArg,
+  TemplateFunctionHttpRequestArg,
+  TemplateFunctionSelectArg,
+  TemplateFunctionTextArg,
+} from '../hooks/useTemplateFunctions';
+import { useTemplateTokensToString } from '../hooks/useTemplateTokensToString';
+import { fallbackRequestName } from '../lib/fallbackRequestName';
+import { Button } from './core/Button';
+import { InlineCode } from './core/InlineCode';
+import { PlainInput } from './core/PlainInput';
+import { Select } from './core/Select';
+import { VStack } from './core/Stacks';
+
+const NULL_ARG = '__NULL__';
+
+interface Props {
+  templateFunction: TemplateFunction;
+  initialTokens: Tokens;
+  hide: () => void;
+  onChange: (insert: string) => void;
+}
+
+export function TemplateFunctionDialog({ templateFunction, hide, initialTokens, onChange }: Props) {
+  const [argValues, setArgValues] = useState<Record<string, string>>(() => {
+    const initial: Record<string, string> = {};
+    const initialArgs =
+      initialTokens.tokens[0]?.type === 'tag' && initialTokens.tokens[0]?.val.type === 'fn'
+        ? initialTokens.tokens[0]?.val.args
+        : [];
+    for (const arg of templateFunction.args) {
+      const initialArg = initialArgs.find((a) => a.name === arg.name);
+      const initialArgValue =
+        initialArg?.value.type === 'str'
+          ? initialArg?.value.text
+          : // TODO: Implement variable-based args
+            '__NULL__';
+      initial[arg.name] = initialArgValue ?? NULL_ARG;
+    }
+
+    return initial;
+  });
+
+  const setArgValue = useCallback((name: string, value: string) => {
+    setArgValues((v) => ({ ...v, [name]: value }));
+  }, []);
+
+  const tokens: Tokens = useMemo(() => {
+    const argTokens: FnArg[] = Object.keys(argValues).map((name) => ({
+      name,
+      value:
+        argValues[name] === NULL_ARG
+          ? { type: 'null' }
+          : {
+              type: 'str',
+              text: argValues[name] ?? '',
+            },
+    }));
+
+    return {
+      tokens: [
+        {
+          type: 'tag',
+          val: {
+            type: 'fn',
+            name: templateFunction.name,
+            args: argTokens,
+          },
+        },
+      ],
+    };
+  }, [argValues, templateFunction.name]);
+
+  const tagText = useTemplateTokensToString(tokens);
+
+  const handleDone = () => {
+    if (tagText.data) {
+      onChange(tagText.data);
+    }
+    hide();
+  };
+
+  const rendered = useRenderTemplate(tagText.data ?? '');
+
+  return (
+    <VStack className="pb-3" space={4}>
+      <VStack space={2}>
+        {templateFunction.args.map((a: TemplateFunctionArg, i: number) => {
+          switch (a.type) {
+            case 'select':
+              return (
+                <SelectArg
+                  key={i}
+                  arg={a}
+                  onChange={(v) => setArgValue(a.name, v)}
+                  value={argValues[a.name] ?? '__ERROR__'}
+                />
+              );
+            case 'text':
+              return (
+                <TextArg
+                  key={i}
+                  arg={a}
+                  onChange={(v) => setArgValue(a.name, v)}
+                  value={argValues[a.name] ?? '__ERROR__'}
+                />
+              );
+            case 'http_request':
+              return (
+                <HttpRequestArg
+                  key={i}
+                  arg={a}
+                  onChange={(v) => setArgValue(a.name, v)}
+                  value={argValues[a.name] ?? '__ERROR__'}
+                />
+              );
+          }
+        })}
+      </VStack>
+      <InlineCode className="select-text cursor-text">{rendered.data}</InlineCode>
+      <Button color="primary" onClick={handleDone}>
+        Done
+      </Button>
+    </VStack>
+  );
+}
+
+function TextArg({
+  arg,
+  onChange,
+  value,
+}: {
+  arg: TemplateFunctionTextArg;
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  const handleChange = useCallback(
+    (value: string) => {
+      onChange(value === '' ? NULL_ARG : value);
+    },
+    [onChange],
+  );
+
+  return (
+    <PlainInput
+      name={arg.name}
+      onChange={handleChange}
+      defaultValue={value === NULL_ARG ? '' : value}
+      label={arg.label ?? arg.name}
+      hideLabel={arg.label == null}
+      placeholder={arg.placeholder ?? arg.defaultValue ?? ''}
+    />
+  );
+}
+
+function SelectArg({
+  arg,
+  value,
+  onChange,
+}: {
+  arg: TemplateFunctionSelectArg;
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  return (
+    <Select
+      label={arg.label ?? arg.name}
+      name={arg.name}
+      onChange={onChange}
+      value={value}
+      options={[
+        ...arg.options.map((a) => ({
+          label: a.name + (arg.defaultValue === a.value ? ' (default)' : ''),
+          value: a.value === arg.defaultValue ? NULL_ARG : a.value,
+        })),
+      ]}
+    />
+  );
+}
+
+function HttpRequestArg({
+  arg,
+  value,
+  onChange,
+}: {
+  arg: TemplateFunctionHttpRequestArg;
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  const httpRequests = useHttpRequests();
+  return (
+    <Select
+      label={arg.label ?? arg.name}
+      name={arg.name}
+      onChange={onChange}
+      value={value}
+      options={[
+        ...httpRequests.map((r) => ({
+          label: fallbackRequestName(r),
+          value: r.id,
+        })),
+      ]}
+    />
+  );
+}

src-web/components/TemplateVariableDialog.tsx

@@ -0,0 +1,69 @@
+import type { EnvironmentVariable } from '@yaakapp/api';
+import { useCallback, useMemo, useState } from 'react';
+import type { Tokens } from '../gen/Tokens';
+import { useActiveEnvironmentVariables } from '../hooks/useActiveEnvironmentVariables';
+import { useRenderTemplate } from '../hooks/useRenderTemplate';
+import { useTemplateTokensToString } from '../hooks/useTemplateTokensToString';
+import { Button } from './core/Button';
+import { InlineCode } from './core/InlineCode';
+import { Select } from './core/Select';
+import { VStack } from './core/Stacks';
+
+interface Props {
+  definition: EnvironmentVariable;
+  initialTokens: Tokens;
+  hide: () => void;
+  onChange: (rawTag: string) => void;
+}
+
+export function TemplateVariableDialog({ hide, onChange, initialTokens }: Props) {
+  const variables = useActiveEnvironmentVariables();
+  const [selectedVariableName, setSelectedVariableName] = useState<string>(() => {
+    return initialTokens.tokens[0]?.type === 'tag' && initialTokens.tokens[0]?.val.type === 'var'
+      ? initialTokens.tokens[0]?.val.name
+      : ''; // Should never happen
+  });
+
+  const tokens: Tokens = useMemo(() => {
+    const selectedVariable = variables.find((v) => v.name === selectedVariableName);
+    return {
+      tokens: [
+        {
+          type: 'tag',
+          val: {
+            type: 'var',
+            name: selectedVariable?.name ?? '',
+          },
+        },
+      ],
+    };
+  }, [selectedVariableName, variables]);
+
+  const tagText = useTemplateTokensToString(tokens);
+  const handleDone = useCallback(async () => {
+    if (tagText.data != null) {
+      onChange(tagText.data);
+    }
+    hide();
+  }, [hide, onChange, tagText.data]);
+
+  const rendered = useRenderTemplate(tagText.data ?? '');
+
+  return (
+    <VStack className="pb-3" space={4}>
+      <VStack space={2}>
+        <Select
+          name="variable"
+          label="Variable"
+          value={selectedVariableName}
+          options={variables.map((v) => ({ label: v.name, value: v.name }))}
+          onChange={setSelectedVariableName}
+        />
+      </VStack>
+      <InlineCode className="select-text cursor-text">{rendered.data}</InlineCode>
+      <Button color="primary" onClick={handleDone}>
+        Done
+      </Button>
+    </VStack>
+  );
+}

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

@@ -24,7 +24,7 @@
     }
 
     .cm-placeholder {
-      @apply text-text-subtlest;
+      @apply text-placeholder;
     }
 
     .cm-scroller {
@@ -60,12 +60,12 @@
       }
     }
 
-    .placeholder {
+    .template-tag {
       /* Colors */
       @apply bg-surface text-text-subtle border-border-subtle;
       @apply hover:border-border-subtle hover:text-text hover:bg-surface-highlight;
 
-      @apply border px-1 mx-[0.5px] rounded cursor-default dark:shadow;
+      @apply inline border px-1 mx-[0.5px] rounded cursor-default dark:shadow;
 
       -webkit-text-security: none;
     }

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

@@ -1,6 +1,7 @@
 import { defaultKeymap } from '@codemirror/commands';
 import { Compartment, EditorState, type Extension } from '@codemirror/state';
 import { keymap, placeholder as placeholderExt, tooltips } from '@codemirror/view';
+import type { EnvironmentVariable } from '@yaakapp/api';
 import classNames from 'classnames';
 import { EditorView } from 'codemirror';
 import type { MutableRefObject, ReactNode } from 'react';
@@ -15,9 +16,13 @@ import {
   useMemo,
   useRef,
 } from 'react';
-import { useActiveEnvironment } from '../../../hooks/useActiveEnvironment';
-import { useActiveWorkspace } from '../../../hooks/useActiveWorkspace';
+import { useActiveEnvironmentVariables } from '../../../hooks/useActiveEnvironmentVariables';
+import { parseTemplate } from '../../../hooks/useParseTemplate';
 import { useSettings } from '../../../hooks/useSettings';
+import { type TemplateFunction, useTemplateFunctions } from '../../../hooks/useTemplateFunctions';
+import { useDialog } from '../../DialogContext';
+import { TemplateFunctionDialog } from '../../TemplateFunctionDialog';
+import { TemplateVariableDialog } from '../../TemplateVariableDialog';
 import { IconButton } from '../IconButton';
 import { HStack } from '../Stacks';
 import './Editor.css';
@@ -58,6 +63,8 @@ export interface EditorProps {
   actions?: ReactNode;
 }
 
+const emptyVariables: EnvironmentVariable[] = [];
+
 export const Editor = forwardRef<EditorView | undefined, EditorProps>(function Editor(
   {
     readOnly,
@@ -87,10 +94,9 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
   ref,
 ) {
   const s = useSettings();
-  const [e] = useActiveEnvironment();
-  const w = useActiveWorkspace();
-  const environment = autocompleteVariables ? e : null;
-  const workspace = autocompleteVariables ? w : null;
+  const templateFunctions = useTemplateFunctions();
+  const allEnvironmentVariables = useActiveEnvironmentVariables();
+  const environmentVariables = autocompleteVariables ? allEnvironmentVariables : emptyVariables;
 
   if (s && wrapLines === undefined) {
     wrapLines = s.editorSoftWrap;
@@ -148,19 +154,78 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
     cm.current?.view.dispatch({ effects: effect });
   }, [wrapLines]);
 
+  const dialog = useDialog();
+  const onClickFunction = useCallback(
+    async (fn: TemplateFunction, tagValue: string, startPos: number) => {
+      const initialTokens = await parseTemplate(tagValue);
+      dialog.show({
+        id: 'template-function',
+        size: 'sm',
+        title: 'Configure Function',
+        render: ({ hide }) => (
+          <TemplateFunctionDialog
+            templateFunction={fn}
+            hide={hide}
+            initialTokens={initialTokens}
+            onChange={(insert) => {
+              cm.current?.view.dispatch({
+                changes: [{ from: startPos, to: startPos + tagValue.length, insert }],
+              });
+            }}
+          />
+        ),
+      });
+    },
+    [dialog],
+  );
+
+  const onClickVariable = useCallback(
+    async (v: EnvironmentVariable, tagValue: string, startPos: number) => {
+      const initialTokens = await parseTemplate(tagValue);
+      dialog.show({
+        size: 'dynamic',
+        id: 'template-variable',
+        title: 'Configure Variable',
+        render: ({ hide }) => (
+          <TemplateVariableDialog
+            definition={v}
+            hide={hide}
+            initialTokens={initialTokens}
+            onChange={(insert) => {
+              cm.current?.view.dispatch({
+                changes: [{ from: startPos, to: startPos + tagValue.length, insert }],
+              });
+            }}
+          />
+        ),
+      });
+    },
+    [dialog],
+  );
+
   // Update language extension when contentType changes
   useEffect(() => {
     if (cm.current === null) return;
     const { view, languageCompartment } = cm.current;
     const ext = getLanguageExtension({
       contentType,
-      environment,
-      workspace,
+      environmentVariables,
       useTemplating,
       autocomplete,
+      templateFunctions,
+      onClickFunction,
+      onClickVariable,
     });
     view.dispatch({ effects: languageCompartment.reconfigure(ext) });
-  }, [contentType, autocomplete, useTemplating, environment, workspace]);
+  }, [
+    contentType,
+    autocomplete,
+    useTemplating,
+    environmentVariables,
+    templateFunctions,
+    onClickFunction,
+    onClickVariable,
+  ]);
 
   // Initialize the editor when ref mounts
   const initEditorRef = useCallback(
@@ -178,8 +243,10 @@ export const Editor = forwardRef<EditorView | undefined, EditorProps>(function E
           contentType,
           useTemplating,
           autocomplete,
-          environment,
-          workspace,
+          environmentVariables,
+          templateFunctions,
+          onClickVariable,
+          onClickFunction,
         });
 
         const state = EditorState.create({

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

@@ -31,9 +31,10 @@ import {
   rectangularSelection,
 } from '@codemirror/view';
 import { tags as t } from '@lezer/highlight';
+import type { EnvironmentVariable } from '@yaakapp/api';
 import { graphql, graphqlLanguageSupport } from 'cm6-graphql';
 import { EditorView } from 'codemirror';
-import type { Environment, Workspace } from '@yaakapp/api';
+import type { TemplateFunction } from '../../../hooks/useTemplateFunctions';
 import type { EditorProps } from './index';
 import { pairs } from './pairs/extension';
 import { text } from './text/extension';
@@ -78,13 +79,17 @@ const syntaxExtensions: Record<string, LanguageSupport> = {
 export function getLanguageExtension({
   contentType,
   useTemplating = false,
-  environment,
-  workspace,
+  environmentVariables,
   autocomplete,
-}: { environment: Environment | null; workspace: Workspace | null } & Pick<
-  EditorProps,
-  'contentType' | 'useTemplating' | 'autocomplete'
->) {
+  templateFunctions,
+  onClickVariable,
+  onClickFunction,
+}: {
+  environmentVariables: EnvironmentVariable[];
+  templateFunctions: TemplateFunction[];
+  onClickFunction: (option: TemplateFunction, tagValue: string, startPos: number) => void;
+  onClickVariable: (option: EnvironmentVariable, tagValue: string, startPos: number) => void;
+} & Pick<EditorProps, 'contentType' | 'useTemplating' | 'autocomplete'>) {
   const justContentType = contentType?.split(';')[0] ?? contentType ?? '';
   if (justContentType === 'application/graphql') {
     return graphql();
@@ -94,7 +99,14 @@ export function getLanguageExtension({
     return base;
   }
 
-  return twig(base, environment, workspace, autocomplete);
+  return twig({
+    base,
+    environmentVariables,
+    templateFunctions,
+    autocomplete,
+    onClickFunction,
+    onClickVariable,
+  });
 }
 
 export const baseExtensions = [

src-web/components/core/Editor/hyperlink/extension.ts

@@ -75,21 +75,21 @@ const decorator = function () {
 
   return ViewPlugin.fromClass(
     class {
-      placeholders: DecorationSet;
+      decorations: DecorationSet;
 
       constructor(view: EditorView) {
-        this.placeholders = placeholderMatcher.createDeco(view);
+        this.decorations = placeholderMatcher.createDeco(view);
       }
 
       update(update: ViewUpdate) {
-        this.placeholders = placeholderMatcher.updateDeco(update, this.placeholders);
+        this.decorations = placeholderMatcher.updateDeco(update, this.decorations);
       }
     },
     {
-      decorations: (instance) => instance.placeholders,
+      decorations: (instance) => instance.decorations,
       provide: (plugin) =>
         EditorView.bidiIsolatedRanges.of((view) => {
-          return view.plugin(plugin)?.placeholders || Decoration.none;
+          return view.plugin(plugin)?.decorations || Decoration.none;
         }),
     },
   );

src-web/components/core/Editor/twig/completion.ts

@@ -3,8 +3,12 @@ import type { CompletionContext } from '@codemirror/autocomplete';
 const openTag = '${[ ';
 const closeTag = ' ]}';
 
-interface TwigCompletionOption {
+export interface TwigCompletionOption {
   name: string;
+  label: string;
+  type: 'function' | 'variable' | 'unknown';
+  value: string | null;
+  onClick?: (rawTag: string, startPos: number) => void;
 }
 
 export interface TwigCompletionConfig {
@@ -41,12 +45,16 @@ export function twigCompletion({ options }: TwigCompletionConfig) {
       from: toMatch.from,
       options: options
         .filter((v) => v.name.trim())
-        .map((v) => ({
-          label: toStartOfVariable ? `${openTag}${v.name}${closeTag}` : v.name,
-          apply: `${openTag}${v.name}${closeTag}`,
-          type: 'variable',
-          matchLen: matchLen,
-        }))
+        .map((v) => {
+          const innerLabel = v.type === 'function' ? `${v.name}()` : v.name;
+          const tagSyntax = openTag + innerLabel + closeTag;
+          return {
+            label: innerLabel,
+            apply: tagSyntax,
+            type: v.type === 'variable' ? 'variable' : 'function',
+            matchLen: matchLen,
+          };
+        })
         // Filter out exact matches
         .filter((o) => o.label !== toMatch.text),
     };

src-web/components/core/Editor/twig/extension.ts

@@ -1,29 +1,57 @@
 import type { LanguageSupport } from '@codemirror/language';
 import { LRLanguage } from '@codemirror/language';
 import { parseMixed } from '@lezer/common';
-import type { Environment, Workspace } from '@yaakapp/api';
+import type { EnvironmentVariable } from '@yaakapp/api';
+import type { TemplateFunction } from '../../../../hooks/useTemplateFunctions';
 import type { GenericCompletionConfig } from '../genericCompletion';
 import { genericCompletion } from '../genericCompletion';
 import { textLanguageName } from '../text/extension';
+import type { TwigCompletionOption } from './completion';
 import { twigCompletion } from './completion';
-import { placeholders } from './placeholder';
+import { templateTags } from './templateTags';
 import { parser as twigParser } from './twig';
 
-export function twig(
-  base: LanguageSupport,
-  environment: Environment | null,
-  workspace: Workspace | null,
-  autocomplete?: GenericCompletionConfig,
-) {
+export function twig({
+  base,
+  environmentVariables,
+  templateFunctions,
+  autocomplete,
+  onClickFunction,
+  onClickVariable,
+}: {
+  base: LanguageSupport;
+  environmentVariables: EnvironmentVariable[];
+  templateFunctions: TemplateFunction[];
+  autocomplete?: GenericCompletionConfig;
+  onClickFunction: (option: TemplateFunction, tagValue: string, startPos: number) => void;
+  onClickVariable: (option: EnvironmentVariable, tagValue: string, startPos: number) => void;
+}) {
   const language = mixLanguage(base);
-  const allVariables = [...(workspace?.variables ?? []), ...(environment?.variables ?? [])];
-  const variables = allVariables.filter((v) => v.enabled) ?? [];
-  const completions = twigCompletion({ options: variables });
+
+  const variableOptions: TwigCompletionOption[] =
+    environmentVariables.map((v) => ({
+      ...v,
+      type: 'variable',
+      label: v.name,
+      onClick: (rawTag: string, startPos: number) => onClickVariable(v, rawTag, startPos),
+    })) ?? [];
+  const functionOptions: TwigCompletionOption[] =
+    templateFunctions.map((fn) => ({
+      name: fn.name,
+      type: 'function',
+      value: null,
+      label: fn.name + '(' + fn.args.length + ')',
+      onClick: (rawTag: string, startPos: number) => onClickFunction(fn, rawTag, startPos),
+    })) ?? [];
+
+  const options = [...variableOptions, ...functionOptions];
+
+  const completions = twigCompletion({ options });
 
   return [
     language,
     base.support,
-    placeholders(variables),
+    templateTags(options),
     language.data.of({ autocomplete: completions }),
     base.language.data.of({ autocomplete: completions }),
     language.data.of({ autocomplete: genericCompletion(autocomplete) }),

src-web/components/core/Editor/twig/placeholder.ts

@@ -1,91 +0,0 @@
-import type { DecorationSet, ViewUpdate } from '@codemirror/view';
-import { Decoration, EditorView, ViewPlugin, WidgetType } from '@codemirror/view';
-import { BetterMatchDecorator } from '../BetterMatchDecorator';
-
-class PlaceholderWidget extends WidgetType {
-  constructor(
-    readonly name: string,
-    readonly value: string,
-    readonly exists: boolean,
-    readonly type: 'function' | 'variable' = 'variable',
-  ) {
-    super();
-  }
-
-  eq(other: PlaceholderWidget) {
-    return this.name == other.name && this.exists == other.exists;
-  }
-
-  toDOM() {
-    const elt = document.createElement('span');
-    elt.className = `x-theme-placeholder placeholder ${
-      !this.exists
-        ? 'x-theme-placeholder--danger'
-        : this.type === 'variable'
-        ? 'x-theme-placeholder--primary'
-        : 'x-theme-placeholder--info'
-    }`;
-    elt.title = !this.exists ? 'Variable not found in active environment' : this.value ?? '';
-    elt.textContent = this.name;
-    return elt;
-  }
-
-  ignoreEvent() {
-    return false;
-  }
-}
-
-export const placeholders = function (variables: { name: string; value?: string }[]) {
-  const placeholderMatcher = new BetterMatchDecorator({
-    regexp: /\$\{\[\s*([^\]\s]+)\s*]}/g,
-    decoration(match, view, matchStartPos) {
-      const matchEndPos = matchStartPos + match[0].length - 1;
-
-      // Don't decorate if the cursor is inside the match
-      for (const r of view.state.selection.ranges) {
-        if (r.from > matchStartPos && r.to <= matchEndPos) {
-          return Decoration.replace({});
-        }
-      }
-
-      const groupMatch = match[1];
-      if (groupMatch == null) {
-        // Should never happen, but make TS happy
-        console.warn('Group match was empty', match);
-        return Decoration.replace({});
-      }
-
-      const isFunction = groupMatch.includes('(');
-      return Decoration.replace({
-        inclusive: true,
-        widget: new PlaceholderWidget(
-          groupMatch,
-          variables.find((v) => v.name === groupMatch)?.value ?? '',
-          isFunction ? true : variables.some((v) => v.name === groupMatch),
-          isFunction ? 'function' : 'variable',
-        ),
-      });
-    },
-  });
-
-  return ViewPlugin.fromClass(
-    class {
-      placeholders: DecorationSet;
-
-      constructor(view: EditorView) {
-        this.placeholders = placeholderMatcher.createDeco(view);
-      }
-
-      update(update: ViewUpdate) {
-        this.placeholders = placeholderMatcher.updateDeco(update, this.placeholders);
-      }
-    },
-    {
-      decorations: (instance) => instance.placeholders,
-      provide: (plugin) =>
-        EditorView.atomicRanges.of((view) => {
-          return view.plugin(plugin)?.placeholders || Decoration.none;
-        }),
-    },
-  );
-};

src-web/components/core/Editor/twig/templateTags.ts

@@ -0,0 +1,115 @@
+import type { DecorationSet, ViewUpdate } from '@codemirror/view';
+import { Decoration, EditorView, ViewPlugin, WidgetType } from '@codemirror/view';
+import { truncate } from '../../../../lib/truncate';
+import { BetterMatchDecorator } from '../BetterMatchDecorator';
+import type { TwigCompletionOption } from './completion';
+
+const TAG_TRUNCATE_LEN = 30;
+
+class TemplateTagWidget extends WidgetType {
+  readonly #clickListenerCallback: () => void;
+
+  constructor(
+    readonly option: TwigCompletionOption,
+    readonly rawTag: string,
+    readonly startPos: number,
+  ) {
+    super();
+    this.#clickListenerCallback = () => {
+      this.option.onClick?.(this.rawTag, this.startPos);
+    };
+  }
+
+  eq(other: TemplateTagWidget) {
+    return (
+      this.option.name === other.option.name &&
+      this.option.type === other.option.type &&
+      this.option.value === other.option.value &&
+      this.rawTag === other.rawTag
+    );
+  }
+
+  toDOM() {
+    const elt = document.createElement('span');
+    elt.className = `x-theme-templateTag template-tag ${
+      this.option.type === 'unknown'
+        ? 'x-theme-templateTag--danger'
+        : this.option.type === 'variable'
+        ? 'x-theme-templateTag--primary'
+        : 'x-theme-templateTag--info'
+    }`;
+    elt.title = this.option.type === 'unknown' ? '__NOT_FOUND__' : this.option.value ?? '';
+    elt.textContent = truncate(
+      this.rawTag.replace('${[', '').replace(']}', '').trim(),
+      TAG_TRUNCATE_LEN,
+    );
+    elt.addEventListener('click', this.#clickListenerCallback);
+    return elt;
+  }
+
+  destroy(dom: HTMLElement) {
+    dom.removeEventListener('click', this.#clickListenerCallback);
+    super.destroy(dom);
+  }
+
+  ignoreEvent() {
+    return false;
+  }
+}
+
+export function templateTags(options: TwigCompletionOption[]) {
+  const templateTagMatcher = new BetterMatchDecorator({
+    regexp: /\$\{\[\s*([^\]]+)\s*]}/g,
+    decoration(match, view, matchStartPos) {
+      const matchEndPos = matchStartPos + match[0].length - 1;
+
+      // Don't decorate if the cursor is inside the match
+      for (const r of view.state.selection.ranges) {
+        if (r.from > matchStartPos && r.to <= matchEndPos) {
+          return Decoration.replace({});
+        }
+      }
+
+      const innerTagMatch = match[1];
+      if (innerTagMatch == null) {
+        // Should never happen, but make TS happy
+        console.warn('Group match was empty', match);
+        return Decoration.replace({});
+      }
+
+      // TODO: Replace this hacky match with a proper template parser
+      const name = innerTagMatch.match(/\s*(\w+)[(\s]*/)?.[1] ?? innerTagMatch;
+
+      let option = options.find((v) => v.name === name);
+      if (option == null) {
+        option = { type: 'unknown', name: innerTagMatch, value: null, label: innerTagMatch };
+      }
+
+      return Decoration.replace({
+        inclusive: true,
+        widget: new TemplateTagWidget(option, match[0], matchStartPos),
+      });
+    },
+  });
+
+  return ViewPlugin.fromClass(
+    class {
+      decorations: DecorationSet;
+
+      constructor(view: EditorView) {
+        this.decorations = templateTagMatcher.createDeco(view);
+      }
+
+      update(update: ViewUpdate) {
+        this.decorations = templateTagMatcher.updateDeco(update, this.decorations);
+      }
+    },
+    {
+      decorations: (instance) => instance.decorations,
+      provide: (plugin) =>
+        EditorView.atomicRanges.of((view) => {
+          return view.plugin(plugin)?.decorations || Decoration.none;
+        }),
+    },
+  );
+}

src-web/components/core/Select.tsx

@@ -84,7 +84,7 @@ export function Select<T extends string>({
             {options.map((o) => {
               if (o.type === 'separator') return null;
               return (
-                <option key={o.label} value={o.value}>
+                <option key={o.value} value={o.value}>
                   {o.label}
                 </option>
               );

src-web/gen/FnArg.ts

@@ -0,0 +1,4 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { Val } from "./Val";
+
+export type FnArg = { name: string, value: Val, };

src-web/gen/Token.ts

@@ -0,0 +1,4 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { Val } from "./Val";
+
+export type Token = { "type": "raw", text: string, } | { "type": "tag", val: Val, } | { "type": "eof" };

src-web/gen/Tokens.ts

@@ -0,0 +1,4 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { Token } from "./Token";
+
+export type Tokens = { tokens: Array<Token>, };

src-web/gen/Val.ts

@@ -0,0 +1,4 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { FnArg } from "./FnArg";
+
+export type Val = { "type": "str", text: string, } | { "type": "var", name: string, } | { "type": "fn", name: string, args: Array<FnArg>, } | { "type": "null" };

src-web/hooks/useActiveEnvironment.ts

@@ -14,7 +14,7 @@ export function useActiveEnvironment() {
 
 export const QUERY_ENVIRONMENT_ID = 'environment_id';
 
-export function useActiveEnvironmentId() {
+function useActiveEnvironmentId() {
   // NOTE: This query param is accessed from Rust side, so do not change
   const [params, setParams] = useSearchParams();
   const id = params.get(QUERY_ENVIRONMENT_ID);

src-web/hooks/useActiveEnvironmentVariables.ts

@@ -0,0 +1,24 @@
+import type { EnvironmentVariable } from '@yaakapp/api';
+import { useMemo } from 'react';
+import { useActiveEnvironment } from './useActiveEnvironment';
+import { useActiveWorkspace } from './useActiveWorkspace';
+
+export function useActiveEnvironmentVariables() {
+  const workspace = useActiveWorkspace();
+  const [environment] = useActiveEnvironment();
+
+  const variables = useMemo(() => {
+    const varMap: Record<string, EnvironmentVariable> = {};
+
+    const allVariables = [...(workspace?.variables ?? []), ...(environment?.variables ?? [])];
+
+    for (const v of allVariables) {
+      if (!v.enabled || !v.name) continue;
+      varMap[v.name] = v;
+    }
+
+    return Object.values(varMap);
+  }, [workspace, environment]);
+
+  return variables;
+}

src-web/hooks/useActiveWorkspace.ts

@@ -1,5 +1,5 @@
-import { useMemo } from 'react';
 import type { Workspace } from '@yaakapp/api';
+import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import type { RouteParamsWorkspace } from './useAppRoutes';
 import { useWorkspaces } from './useWorkspaces';
@@ -7,6 +7,7 @@ import { useWorkspaces } from './useWorkspaces';
 export function useActiveWorkspace(): Workspace | null {
   const workspaceId = useActiveWorkspaceId();
   const workspaces = useWorkspaces();
+
   return useMemo(
     () => workspaces.find((w) => w.id === workspaceId) ?? null,
     [workspaces, workspaceId],

src-web/hooks/useAppInfo.ts

@@ -1,4 +1,3 @@
-import { useQuery } from '@tanstack/react-query';
 import { invokeCmd } from '../lib/tauri';
 
 export interface AppInfo {
@@ -9,12 +8,8 @@ export interface AppInfo {
   appLogDir: string;
 }
 
+const appInfo = (await invokeCmd('cmd_metadata')) as AppInfo;
+
 export function useAppInfo() {
-  return useQuery({
-    queryKey: ['appInfo'],
-    queryFn: async () => {
-      const metadata = await invokeCmd('cmd_metadata');
-      return metadata as AppInfo;
-    },
-  }).data;
+  return appInfo;
 }

src-web/hooks/useCheckForUpdates.tsx

@@ -18,7 +18,7 @@ export function useCheckForUpdates() {
           title: 'No Update Available',
           body: (
             <>
-              You are currently on the latest version <InlineCode>{appInfo?.version}</InlineCode>
+              You are currently on the latest version <InlineCode>{appInfo.version}</InlineCode>
             </>
           ),
         });

src-web/hooks/useDuplicateGrpcRequest.ts

@@ -1,12 +1,11 @@
 import { useMutation } from '@tanstack/react-query';
 import type { GrpcRequest } from '@yaakapp/api';
 import { trackEvent } from '../lib/analytics';
-import { setKeyValue } from '../lib/keyValueStore';
 import { invokeCmd } from '../lib/tauri';
 import { useActiveEnvironment } from './useActiveEnvironment';
 import { useActiveWorkspace } from './useActiveWorkspace';
 import { useAppRoutes } from './useAppRoutes';
-import { protoFilesArgs, useGrpcProtoFiles } from './useGrpcProtoFiles';
+import { getGrpcProtoFiles, setGrpcProtoFiles } from './useGrpcProtoFiles';
 
 export function useDuplicateGrpcRequest({
   id,
@@ -18,7 +17,7 @@ export function useDuplicateGrpcRequest({
   const activeWorkspace = useActiveWorkspace();
   const [activeEnvironment] = useActiveEnvironment();
   const routes = useAppRoutes();
-  const protoFiles = useGrpcProtoFiles(id);
+
   return useMutation<GrpcRequest, string>({
     mutationKey: ['duplicate_grpc_request', id],
     mutationFn: async () => {
@@ -27,8 +26,11 @@ export function useDuplicateGrpcRequest({
     },
     onSettled: () => trackEvent('grpc_request', 'duplicate'),
     onSuccess: async (request) => {
+      if (id == null) return;
+
       // Also copy proto files to new request
-      await setKeyValue({ ...protoFilesArgs(request.id), value: protoFiles.value ?? [] });
+      const protoFiles = await getGrpcProtoFiles(id);
+      await setGrpcProtoFiles(request.id, protoFiles);
 
       if (navigateAfter && activeWorkspace !== null) {
         routes.navigate('request', {

src-web/hooks/useEnvironments.ts

@@ -1,24 +1,20 @@
-import { useQuery } from '@tanstack/react-query';
 import type { Environment } from '@yaakapp/api';
+import { atom, useAtom } from 'jotai/index';
+import { useEffect } from 'react';
 import { invokeCmd } from '../lib/tauri';
 import { useActiveWorkspace } from './useActiveWorkspace';
 
-export function environmentsQueryKey({ workspaceId }: { workspaceId: string }) {
-  return ['environments', { workspaceId }];
-}
+export const environmentsAtom = atom<Environment[]>([]);
 
 export function useEnvironments() {
+  const [items, setItems] = useAtom(environmentsAtom);
   const workspace = useActiveWorkspace();
-  return (
-    useQuery({
-      enabled: workspace != null,
-      queryKey: environmentsQueryKey({ workspaceId: workspace?.id ?? 'n/a' }),
-      queryFn: async () => {
-        if (workspace == null) return [];
-        return (await invokeCmd('cmd_list_environments', {
-          workspaceId: workspace.id,
-        })) as Environment[];
-      },
-    }).data ?? []
-  );
+
+  // Fetch new requests when workspace changes
+  useEffect(() => {
+    if (workspace == null) return;
+    invokeCmd<Environment[]>('cmd_list_environments', { workspaceId: workspace.id }).then(setItems);
+  }, [setItems, workspace]);
+
+  return items;
 }

src-web/hooks/useGrpcConnections.ts

@@ -13,6 +13,7 @@ export function useGrpcConnections(requestId: string | null) {
       initialData: [],
       queryKey: grpcConnectionsQueryKey({ requestId: requestId ?? 'n/a' }),
       queryFn: async () => {
+        if (requestId == null) return [];
         return (await invokeCmd('cmd_list_grpc_connections', {
           requestId,
           limit: 200,

src-web/hooks/useGrpcProtoFiles.ts

@@ -1,3 +1,4 @@
+import { getKeyValue, setKeyValue } from '../lib/keyValueStore';
 import { useKeyValue } from './useKeyValue';
 
 export function protoFilesArgs(requestId: string | null) {
@@ -10,3 +11,11 @@ export function protoFilesArgs(requestId: string | null) {
 export function useGrpcProtoFiles(activeRequestId: string | null) {
   return useKeyValue<string[]>({ ...protoFilesArgs(activeRequestId), fallback: [] });
 }
+
+export async function getGrpcProtoFiles(requestId: string) {
+  return getKeyValue<string[]>({ ...protoFilesArgs(requestId), fallback: [] });
+}
+
+export async function setGrpcProtoFiles(requestId: string, protoFiles: string[]) {
+  return setKeyValue<string[]>({ ...protoFilesArgs(requestId), value: protoFiles });
+}

src-web/hooks/useGrpcRequests.ts

@@ -1,24 +1,22 @@
-import { useQuery } from '@tanstack/react-query';
 import type { GrpcRequest } from '@yaakapp/api';
+import { atom, useAtom } from 'jotai';
+import { useEffect } from 'react';
 import { invokeCmd } from '../lib/tauri';
 import { useActiveWorkspace } from './useActiveWorkspace';
 
-export function grpcRequestsQueryKey({ workspaceId }: { workspaceId: string }) {
-  return ['grpc_requests', { workspaceId }];
-}
+export const grpcRequestsAtom = atom<GrpcRequest[]>([]);
 
 export function useGrpcRequests() {
+  const [items, setItems] = useAtom(grpcRequestsAtom);
   const workspace = useActiveWorkspace();
-  return (
-    useQuery({
-      enabled: workspace != null,
-      queryKey: grpcRequestsQueryKey({ workspaceId: workspace?.id ?? 'n/a' }),
-      queryFn: async () => {
-        if (workspace == null) return [];
-        return (await invokeCmd('cmd_list_grpc_requests', {
-          workspaceId: workspace.id,
-        })) as GrpcRequest[];
-      },
-    }).data ?? []
-  );
+
+  // Fetch new requests when workspace changes
+  useEffect(() => {
+    if (workspace == null) return;
+    invokeCmd<GrpcRequest[]>('cmd_list_grpc_requests', { workspaceId: workspace.id }).then(
+      setItems,
+    );
+  }, [setItems, workspace]);
+
+  return items;
 }

src-web/hooks/useHttpRequestActions.ts

@@ -9,6 +9,7 @@ import { invokeCmd } from '../lib/tauri';
 export function useHttpRequestActions() {
   const httpRequestActions = useQuery({
     queryKey: ['http_request_actions'],
+    refetchOnWindowFocus: false,
     queryFn: async () => {
       const responses = (await invokeCmd(
         'cmd_http_request_actions',

src-web/hooks/useHttpRequests.ts

@@ -1,24 +1,21 @@
-import { useQuery } from '@tanstack/react-query';
 import type { HttpRequest } from '@yaakapp/api';
+import { atom, useAtom } from 'jotai';
+import { useEffect } from 'react';
 import { invokeCmd } from '../lib/tauri';
 import { useActiveWorkspace } from './useActiveWorkspace';
 
-export function httpRequestsQueryKey({ workspaceId }: { workspaceId: string }) {
-  return ['http_requests', { workspaceId }];
-}
+export const httpRequestsAtom = atom<HttpRequest[]>([]);
 
 export function useHttpRequests() {
+  const [items, setItems] = useAtom(httpRequestsAtom);
   const workspace = useActiveWorkspace();
-  return (
-    useQuery({
-      enabled: workspace != null,
-      queryKey: httpRequestsQueryKey({ workspaceId: workspace?.id ?? 'n/a' }),
-      queryFn: async () => {
-        if (workspace == null) return [];
-        return (await invokeCmd('cmd_list_http_requests', {
-          workspaceId: workspace.id,
-        })) as HttpRequest[];
-      },
-    }).data ?? []
-  );
+
+  useEffect(() => {
+    if (workspace == null) return;
+    invokeCmd<HttpRequest[]>('cmd_list_http_requests', { workspaceId: workspace.id }).then(
+      setItems,
+    );
+  }, [setItems, workspace]);
+
+  return items;
 }

src-web/hooks/useHttpResponses.ts

@@ -13,6 +13,7 @@ export function useHttpResponses(requestId: string | null) {
       initialData: [],
       queryKey: httpResponsesQueryKey({ requestId: requestId ?? 'n/a' }),
       queryFn: async () => {
+        if (requestId == null) return [];
         return (await invokeCmd('cmd_list_http_responses', {
           requestId,
           limit: 200,

src-web/hooks/useParseTemplate.ts

@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/react-query';
+import type { Tokens } from '../gen/Tokens';
+import { invokeCmd } from '../lib/tauri';
+
+export function useParseTemplate(template: string) {
+  return useQuery<Tokens>({
+    queryKey: ['parse_template', template],
+    queryFn: () => parseTemplate(template),
+  });
+}
+
+export async function parseTemplate(template: string): Promise<Tokens> {
+  return invokeCmd('cmd_parse_template', { template });
+}

src-web/hooks/useRenderTemplate.ts

@@ -0,0 +1,26 @@
+import { useQuery } from '@tanstack/react-query';
+import { invokeCmd } from '../lib/tauri';
+import { useActiveEnvironment } from './useActiveEnvironment';
+import { useActiveWorkspace } from './useActiveWorkspace';
+
+export function useRenderTemplate(template: string) {
+  const workspaceId = useActiveWorkspace()?.id ?? 'n/a';
+  const environmentId = useActiveEnvironment()[0]?.id ?? null;
+  return useQuery<string>({
+    placeholderData: (prev) => prev, // Keep previous data on refetch
+    queryKey: ['render_template', template],
+    queryFn: () => renderTemplate({ template, workspaceId, environmentId }),
+  });
+}
+
+export async function renderTemplate({
+  template,
+  workspaceId,
+  environmentId,
+}: {
+  template: string;
+  workspaceId: string;
+  environmentId: string | null;
+}): Promise<string> {
+  return invokeCmd('cmd_render_template', { template, workspaceId, environmentId });
+}

src-web/hooks/useSyncWorkspaceRequestTitle.ts

@@ -29,7 +29,7 @@ export function useSyncWorkspaceRequestTitle() {
       newTitle += ` › ${fallbackRequestName(activeRequest)}`;
     }
 
-    if (appInfo?.isDev) {
+    if (appInfo.isDev) {
       newTitle = `[DEV] ${newTitle}`;
     }
 
@@ -40,5 +40,5 @@ export function useSyncWorkspaceRequestTitle() {
     } else {
       emit('yaak_title_changed', newTitle).catch(console.error);
     }
-  }, [activeEnvironment, activeRequest, activeWorkspace, appInfo?.isDev, osInfo.osType]);
+  }, [activeEnvironment, activeRequest, activeWorkspace, appInfo.isDev, osInfo.osType]);
 }

src-web/hooks/useTemplateFunctions.ts

@@ -0,0 +1,88 @@
+import type { HttpRequest } from '@yaakapp/api';
+
+export interface TemplateFunctionArgBase {
+  name: string;
+  optional?: boolean;
+  label?: string;
+}
+
+export interface TemplateFunctionSelectArg extends TemplateFunctionArgBase {
+  type: 'select';
+  defaultValue?: string;
+  options: readonly { name: string; value: string }[];
+}
+
+export interface TemplateFunctionTextArg extends TemplateFunctionArgBase {
+  type: 'text';
+  defaultValue?: string;
+  placeholder?: string;
+}
+
+export interface TemplateFunctionHttpRequestArg extends TemplateFunctionArgBase {
+  type: HttpRequest['model'];
+}
+
+export type TemplateFunctionArg =
+  | TemplateFunctionSelectArg
+  | TemplateFunctionTextArg
+  | TemplateFunctionHttpRequestArg;
+
+export interface TemplateFunction {
+  name: string;
+  args: TemplateFunctionArg[];
+}
+
+export function useTemplateFunctions() {
+  const fns: TemplateFunction[] = [
+    {
+      name: 'timestamp',
+      args: [
+        {
+          type: 'text',
+          name: 'from',
+          label: 'From',
+          placeholder: '2023-23-12T04:03:03',
+          optional: true,
+        },
+        {
+          type: 'select',
+          label: 'Format',
+          name: 'format',
+          options: [
+            { name: 'RFC3339', value: 'rfc3339' },
+            { name: 'Unix', value: 'unix' },
+            { name: 'Unix (ms)', value: 'unix_millis' },
+          ],
+          optional: true,
+          defaultValue: 'RFC3339',
+        },
+      ],
+    },
+    {
+      name: 'response',
+      args: [
+        {
+          type: 'http_request',
+          name: 'request',
+          label: 'Request',
+        },
+        {
+          type: 'select',
+          name: 'attribute',
+          label: 'Attribute',
+          options: [
+            { name: 'Body', value: 'body' },
+            { name: 'Header', value: 'header' },
+          ],
+        },
+        {
+          type: 'text',
+          name: 'filter',
+          label: 'Filter',
+          placeholder: 'JSONPath or XPath expression',
+        },
+      ],
+    },
+  ];
+  return fns;
+}

src-web/hooks/useTemplateTokensToString.ts

@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query';
+import type { Tokens } from '../gen/Tokens';
+import { invokeCmd } from '../lib/tauri';
+
+export function useTemplateTokensToString(tokens: Tokens) {
+  return useQuery<string>({
+    placeholderData: (prev) => prev, // Keep previous data on refetch
+    queryKey: ['template_tokens_to_string', tokens],
+    queryFn: () => templateTokensToString(tokens),
+  });
+}
+
+export async function templateTokensToString(tokens: Tokens): Promise<string> {
+  return invokeCmd('cmd_template_tokens_to_string', { tokens });
+}

src-web/hooks/useWorkspaces.ts

@@ -1,20 +1,10 @@
-import { useQuery } from '@tanstack/react-query';
 import type { Workspace } from '@yaakapp/api';
-import { invokeCmd } from '../lib/tauri';
+import { atom, useAtomValue } from 'jotai';
+import { listWorkspaces } from '../lib/store';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/ban-types
-export function workspacesQueryKey(_?: {}) {
-  return ['workspaces'];
-}
+const workspaces = await listWorkspaces();
+export const workspacesAtom = atom<Workspace[]>(workspaces);
 
 export function useWorkspaces() {
-  return (
-    useQuery({
-      queryKey: workspacesQueryKey(),
-      queryFn: async () => {
-        const workspaces = await invokeCmd('cmd_list_workspaces');
-        return workspaces as Workspace[];
-      },
-    }).data ?? []
-  );
+  return useAtomValue(workspacesAtom);
 }

src-web/lib/store.ts

@@ -52,6 +52,11 @@ export async function getWorkspace(id: string | null): Promise<Workspace | null>
   return workspace;
 }
 
+export async function listWorkspaces(): Promise<Workspace[]> {
+  const workspaces: Workspace[] = (await invokeCmd('cmd_list_workspaces')) ?? [];
+  return workspaces;
+}
+
 export async function getCookieJar(id: string | null): Promise<CookieJar | null> {
   if (id === null) return null;
   const cookieJar: CookieJar = (await invokeCmd('cmd_get_cookie_jar', { id })) ?? null;

src-web/lib/tauri.ts

@@ -6,6 +6,7 @@ type TauriCmd =
   | 'cmd_check_for_updates'
   | 'cmd_create_cookie_jar'
   | 'cmd_create_environment'
+  | 'cmd_template_tokens_to_string'
   | 'cmd_create_folder'
   | 'cmd_create_grpc_request'
   | 'cmd_create_http_request'
@@ -21,6 +22,7 @@ type TauriCmd =
   | 'cmd_delete_http_request'
   | 'cmd_delete_http_response'
   | 'cmd_delete_workspace'
+  | 'cmd_dismiss_notification'
   | 'cmd_duplicate_grpc_request'
   | 'cmd_duplicate_http_request'
   | 'cmd_export_data'
@@ -35,6 +37,7 @@ type TauriCmd =
   | 'cmd_get_workspace'
   | 'cmd_grpc_go'
   | 'cmd_grpc_reflect'
+  | 'cmd_http_request_actions'
   | 'cmd_import_data'
   | 'cmd_list_cookie_jars'
   | 'cmd_list_environments'
@@ -48,7 +51,8 @@ type TauriCmd =
   | 'cmd_metadata'
   | 'cmd_new_nested_window'
   | 'cmd_new_window'
-  | 'cmd_dismiss_notification'
+  | 'cmd_parse_template'
+  | 'cmd_render_template'
   | 'cmd_save_response'
   | 'cmd_send_ephemeral_request'
   | 'cmd_send_http_request'
@@ -62,7 +66,6 @@ type TauriCmd =
   | 'cmd_update_http_request'
   | 'cmd_update_settings'
   | 'cmd_update_workspace'
-  | 'cmd_http_request_actions'
   | 'cmd_write_file_dev';
 
 export async function invokeCmd<T>(cmd: TauriCmd, args?: InvokeArgs): Promise<T> {

src-web/lib/theme/window.ts

@@ -39,7 +39,7 @@ export type YaakTheme = YaakColors & {
     appHeader: Partial<YaakColors>;
     button: Partial<YaakColors>;
     banner: Partial<YaakColors>;
-    placeholder: Partial<YaakColors>;
+    templateTag: Partial<YaakColors>;
     urlBar: Partial<YaakColors>;
     editor: Partial<YaakColors>;
     input: Partial<YaakColors>;
@@ -87,7 +87,7 @@ function themeVariables(theme?: Partial<YaakColors>, base?: CSSVariables): CSSVa
   return vars;
 }
 
-function placeholderColorVariables(color: YaakColor): Partial<CSSVariables> {
+function templateTagColorVariables(color: YaakColor): Partial<CSSVariables> {
   return {
     text: color.lift(0.6),
     textSubtle: color.lift(0.4),
@@ -201,14 +201,14 @@ function bannerCSS(color: YaakColorKey, colors?: Partial<YaakColors>): string |
   );
 }
 
-function placeholderCSS(color: YaakColorKey, colors?: Partial<YaakColors>): string | null {
+function templateTagCSS(color: YaakColorKey, colors?: Partial<YaakColors>): string | null {
   const yaakColor = colors?.[color];
   if (yaakColor == null) {
     return null;
   }
 
   return [
-    variablesToCSS(`.x-theme-placeholder--${color}`, placeholderColorVariables(yaakColor)),
+    variablesToCSS(`.x-theme-templateTag--${color}`, templateTagColorVariables(yaakColor)),
   ].join('\n\n');
 }
 
@@ -254,7 +254,7 @@ export function getThemeCSS(theme: YaakTheme): string {
         bannerCSS(key as YaakColorKey, theme.components?.banner ?? colors),
       ),
       ...Object.keys(colors ?? {}).map((key) =>
-        placeholderCSS(key as YaakColorKey, theme.components?.placeholder ?? colors),
+        templateTagCSS(key as YaakColorKey, theme.components?.templateTag ?? colors),
       ),
     ].join('\n\n');
   } catch (err) {

src-web/lib/truncate.ts

@@ -0,0 +1,4 @@
+export function truncate(text: string, len: number): string {
+  if (text.length <= len) return text;
+  return text.slice(0, len) + '…';
+}

src-web/main.css

@@ -26,6 +26,13 @@
     @apply select-none cursor-default;
   }
 
+  input,
+  textarea {
+    &::placeholder {
+      @apply text-placeholder;
+    }
+  }
+
   .select-all * {
     /*@apply select-all;*/
   }

src-web/main.tsx

@@ -1,9 +1,9 @@
 import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
+import { attachConsole } from '@tauri-apps/plugin-log';
 import { type } from '@tauri-apps/plugin-os';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { pdfjs } from 'react-pdf';
-import { attachConsole } from '@tauri-apps/plugin-log';
 import { App } from './components/App';
 import './main.css';