From 89b9c6ae279341b3e3b8a7debfa2d86db1cede2a Mon Sep 17 00:00:00 2001
From: zjp <jiping_zhou@foxmail.com>
Date: Fri, 30 Jan 2026 05:06:51 +0000
Subject: [PATCH 1/6] feat(ui): open adt popup panel when adt or field node is
 clicked

---
 ui/app/components/Flow.vue | 23 +++++++++++++++++------
 ui/app/components/UPG.vue  | 22 +++++++++++++++++++---
 ui/app/lib/graph.ts        |  4 ++++
 ui/app/lib/output/adt.ts   |  6 ++----
 4 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/ui/app/components/Flow.vue b/ui/app/components/Flow.vue
index 72716b5..5dc9b3e 100644
--- a/ui/app/components/Flow.vue
+++ b/ui/app/components/Flow.vue
@@ -21,10 +21,12 @@ import { adtURL, type FlowOpts } from '~/lib/topbar';
 import type { PanelContent } from '~/lib/panel';
 import ELK from 'elkjs/lib/elk.bundled.js'
 import { NodeKind, Plot, PlotConfig, type IdToItem } from '~/utils/graph';
-import type { AdtOpts } from '~/lib/output/adt';
+import type { AdtClicked, AdtOpts } from '~/lib/output/adt';
+import { extractAdtFromIdField } from '~/lib/graph';
 
 const flowOpts = defineModel<FlowOpts>('flowOpts', { required: true });
 const adtOpts = defineModel<AdtOpts>('adtOpts', { required: true });
+const adtClicked = defineModel<AdtClicked>('adtClicked', { required: true });
 const panelContent = defineModel<PanelContent>('panelContent', { required: true });
 
 const elk = new ELK()
@@ -57,17 +59,26 @@ const data = ref<Data>(EMPTY_DATA);
 
 // Respond to node click.
 onNodeClick(event => {
-  const selected = data.value.id_to_item[event.node.id]
-  if (selected && selected.kind === NodeKind.Adt) {
+  const id = event.node.id
+  const selected = data.value.id_to_item[id]
+  const selectAdt = selected?.kind === NodeKind.Adt
+  const selectField = selected?.kind === NodeKind.Field
+
+  if (selectAdt || selectField) {
     const name = selected.name
+    const adt = selectField ? extractAdtFromIdField(id) : name
 
     // Update adt data.
-    const url = adtURL(name)
+    const url = adtURL(adt)
     $fetch(url)
       .then(text => {
         // Update nodeItem here because panel reacts to the two values.
-        panelContent.value.nodeItem = name
-        adtOpts.value = { name, data: JSON.parse(text as string) }
+        panelContent.value.nodeItem = adt
+        // Update adt data.
+        adtOpts.value = { name: adt, data: JSON.parse(text as string) }
+        // Update adt clicked.
+        const click = { clickedAdt: adt, clickedField: selectField ? name : undefined }
+        Object.assign(adtClicked.value, click)
       })
       .catch(err => console.log("Failed to fetch adt.json", err))
     return
diff --git a/ui/app/components/UPG.vue b/ui/app/components/UPG.vue
index 9c6889d..37f0718 100644
--- a/ui/app/components/UPG.vue
+++ b/ui/app/components/UPG.vue
@@ -2,8 +2,8 @@
   <div class="upg-left">
     <WidgetTopBar v-model:flowOpts="flowOpts" v-model:crate="crate" v-model="nodeItem" v-model:share="share"
       :tags="tags" :unsafeFns="unsafeFns" />
-    <Flow :nodeItem="nodeItem" :tags="tags" v-model:flowOpts="flowOpts" v-model:panelContent="panelContent"
-      v-model:adtOpts="adtOpts" />
+    <Flow :nodeItem="nodeItem" :tags="tags" :adtClicked="adtClicked" v-model:flowOpts="flowOpts"
+      v-model:panelContent="panelContent" v-model:adtOpts="adtOpts" />
   </div>
   <div class="upg-right">
     <div class="upg-panel upg-panel-1">
@@ -15,6 +15,11 @@
         :unsafeFns="unsafeFns" />
     </div>
   </div>
+  <UModal :ui="{ content: 'w-[70vw] max-w-none' }" v-model:open="adtClicked.open">
+    <template #content>
+      <CodeAdt :adt="adtOpts.data" :tags="tags" :unsafeFns="unsafeFns" />
+    </template>
+  </UModal>
 </template>
 
 <script setup lang="ts">
@@ -22,7 +27,7 @@ import type { FlowOpts, UnsafeFns } from "~/lib/topbar"
 import { type DataTags, } from '~/lib/output/tag';
 import { Panel, toPanel, toPanelStr, type PanelContent } from "~/lib/panel"
 import { Crate, FLOW_OPTS, defaultCrateItemQuery, tagURL, toCrate, toViewTypes, unsafeFnsURL } from "~/lib/topbar";
-import type { AdtOpts } from "~/lib/output/adt";
+import type { AdtClicked, AdtOpts } from "~/lib/output/adt";
 
 const router = useRouter();
 const route = useRoute();
@@ -85,6 +90,17 @@ const downPanel = ref(initState.down);
 const flowOpts = ref<FlowOpts>(initState.flowOpts);
 const adtOpts = ref<AdtOpts>({});
 
+const adtClicked = ref<AdtClicked>({ open: false })
+watch(() => ({
+  isAdtPanel: upPanel.value === Panel.Adt || downPanel.value === Panel.Adt,
+  adt: adtClicked.value.clickedAdt || adtClicked.value.clickedField
+}), ({ isAdtPanel, adt }) => {
+  console.log(isAdtPanel, adt, adtClicked.value)
+  // Auto open adt panel when side panels doesn't show adt panel, and user clicked adt or field.
+  if (!isAdtPanel && adt)
+    adtClicked.value = { open: true }
+})
+
 const share = ref<boolean>(false)
 watch(share, val => {
   if (!val) return;
diff --git a/ui/app/lib/graph.ts b/ui/app/lib/graph.ts
index a2ffe56..bd4aa31 100644
--- a/ui/app/lib/graph.ts
+++ b/ui/app/lib/graph.ts
@@ -31,6 +31,10 @@ export function idField(adt: string, field: string) {
   return `field@${field}@adt@${adt}`
 }
 
+export function extractAdtFromIdField(id: string) {
+  return id.match(/adt@([^@]+)$/)?.[1] ?? ""
+}
+
 export function isAdtID(id: string) {
   return id.startsWith("adt@")
 }
diff --git a/ui/app/lib/output/adt.ts b/ui/app/lib/output/adt.ts
index e95927e..766289c 100644
--- a/ui/app/lib/output/adt.ts
+++ b/ui/app/lib/output/adt.ts
@@ -1,10 +1,8 @@
 import type { SearchFnItem } from "../topbar"
 
-export type AdtOpts = {
-  name?: string, data?: DataAdt,
-}
+export type AdtOpts = { name?: string, data?: DataAdt }
 
-export const ADT_OPTs: AdtOpts = {}
+export type AdtClicked = { open: boolean, clickedAdt?: string, clickedField?: string }
 
 export type DataAdt = {
   name: string,

From dc6905bcc9ad3646d39c6c96e999c5254d894e26 Mon Sep 17 00:00:00 2001
From: zjp <jiping_zhou@foxmail.com>
Date: Fri, 30 Jan 2026 05:28:26 +0000
Subject: [PATCH 2/6] ui(graph): make field header and caller header not
 selectable or draggable

---
 ui/app/utils/graph.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/ui/app/utils/graph.ts b/ui/app/utils/graph.ts
index d654fc9..eb9db7d 100644
--- a/ui/app/utils/graph.ts
+++ b/ui/app/utils/graph.ts
@@ -171,6 +171,7 @@ export class PlotConfig {
     return {
       id, label, width: dim.width, height: dim.height, parentNode: parent,
       position: { x, y }, class: this.nodeClass(id), type: "no-handle",
+      selectable: false, draggable: false,
     }
   }
 
@@ -182,6 +183,7 @@ export class PlotConfig {
     return {
       id, label, width: dim.width, height: dim.height, parentNode: parent,
       position: { x, y }, class: this.nodeClass(id), type: "no-handle",
+      selectable: false, draggable: false,
     }
   }
 

From 58b7e3b7d209517d3d3139e7be7ebaaa69a90276 Mon Sep 17 00:00:00 2001
From: zjp <jiping_zhou@foxmail.com>
Date: Fri, 30 Jan 2026 10:32:24 +0000
Subject: [PATCH 3/6] feat(ui): adt popup panel with tree navi and search panel

---
 ui/app/assets/css/main.css          |   6 +-
 ui/app/components/UPG.vue           |  11 +-
 ui/app/components/code/AdtPopup.vue | 176 ++++++++++++++++++++++++++++
 ui/nuxt.config.ts                   |   4 +
 4 files changed, 189 insertions(+), 8 deletions(-)
 create mode 100644 ui/app/components/code/AdtPopup.vue

diff --git a/ui/app/assets/css/main.css b/ui/app/assets/css/main.css
index c91fceb..2508502 100644
--- a/ui/app/assets/css/main.css
+++ b/ui/app/assets/css/main.css
@@ -214,5 +214,7 @@ html, body {
   }
 }
 
-/* .fnLink { @apply font-mono; } */
-.unsafeFnLink { @apply text-red-700 dark:text-red-400 hover:font-bold hover:text-red-500 transition-colors; }
+.unsafeFnLink {
+  @apply text-rose-700 hover:text-rose-500 font-bold transition-colors
+    dark:hover:text-rose-400 dark:hover:text-rose-300;
+}
diff --git a/ui/app/components/UPG.vue b/ui/app/components/UPG.vue
index 37f0718..c81042f 100644
--- a/ui/app/components/UPG.vue
+++ b/ui/app/components/UPG.vue
@@ -4,6 +4,11 @@
       :tags="tags" :unsafeFns="unsafeFns" />
     <Flow :nodeItem="nodeItem" :tags="tags" :adtClicked="adtClicked" v-model:flowOpts="flowOpts"
       v-model:panelContent="panelContent" v-model:adtOpts="adtOpts" />
+    <UModal :ui="{ content: 'w-[80vw] max-w-none' }" v-model:open="adtClicked.open">
+      <template #content>
+        <CodeAdtPopup :adt="adtOpts.data" :tags="tags" :unsafeFns="unsafeFns" />
+      </template>
+    </UModal>
   </div>
   <div class="upg-right">
     <div class="upg-panel upg-panel-1">
@@ -15,11 +20,6 @@
         :unsafeFns="unsafeFns" />
     </div>
   </div>
-  <UModal :ui="{ content: 'w-[70vw] max-w-none' }" v-model:open="adtClicked.open">
-    <template #content>
-      <CodeAdt :adt="adtOpts.data" :tags="tags" :unsafeFns="unsafeFns" />
-    </template>
-  </UModal>
 </template>
 
 <script setup lang="ts">
@@ -95,7 +95,6 @@ watch(() => ({
   isAdtPanel: upPanel.value === Panel.Adt || downPanel.value === Panel.Adt,
   adt: adtClicked.value.clickedAdt || adtClicked.value.clickedField
 }), ({ isAdtPanel, adt }) => {
-  console.log(isAdtPanel, adt, adtClicked.value)
   // Auto open adt panel when side panels doesn't show adt panel, and user clicked adt or field.
   if (!isAdtPanel && adt)
     adtClicked.value = { open: true }
diff --git a/ui/app/components/code/AdtPopup.vue b/ui/app/components/code/AdtPopup.vue
new file mode 100644
index 0000000..acefba6
--- /dev/null
+++ b/ui/app/components/code/AdtPopup.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="min-h-[75vh] flex">
+    <UTree :items="items" :get-key="item => item.id" class="w-50 h-full" expanded-icon="tabler:square-letter-f" />
+
+    <div class="w-full">
+      <WidgetSearchFn :v_fn="adtItem.v_fn" :unsafeFns="unsafeFns" v-model="search" :title="adtItem.desc" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { AdtPanelItem, DataAdt } from '~/lib/output/adt';
+import { getTag, type DataTags } from '~/lib/output/tag';
+import type { Search, UnsafeFns } from '~/lib/topbar';
+import type { TreeItem } from '@nuxt/ui'
+
+const props = defineProps<{ adt?: DataAdt, tags: DataTags, unsafeFns: UnsafeFns }>()
+
+function gen(v: string[] | undefined, kind: string, desc: string) {
+  const v_fn = v ? v.map(
+    name => ({ name, tags: getTag(name, props.tags, true) }))
+    : []
+  return { v_fn, kind, desc }
+}
+
+// Fields
+const fields = computed<string[]>(() => {
+  return Object.values(props.adt?.variant_fields ?? {}).map(f => f.name)
+})
+
+const fieldAccess = computed<{ field: string, data: AdtPanelItem }[]>(() => {
+  const adt = props.adt
+  if (adt === undefined) return []
+  const fields_ = fields.value
+  if (adt.access_field.length != fields_.length) return []
+
+  return fields_.flatMap((field, idx) => {
+    const access = adt!.access_field[idx]!
+    return [
+      { field, data: gen(access.read, "Read", `Read Access to Field \`${field}\` of \`${adt.name}\``) },
+      { field, data: gen(access.write, "Write", `Write Access to Field \`${field}\` of \`${adt.name}\``) },
+      // { field, data: gen(access.other, "Unknown", `Other Access to Field \`${field}\` of Self`) },
+    ]
+  })
+})
+
+const groupedFieldAccess = computed<{ [key: string]: AdtPanelItem[] }>(() => {
+  const map: { [key: string]: AdtPanelItem[] } = {}
+  fieldAccess.value.forEach(({ field, data }) => {
+    map[field] ??= []
+    map[field].push(data)
+  })
+  return map
+})
+
+// Constructors
+const constructors = computed<AdtPanelItem>(() =>
+  gen(props.adt?.constructors, "Constructors", `All Constructors of \`${props.adt?.name ?? ''}\``)
+)
+
+// As arguments
+const group_access_self_as_arg = computed<{ group: string, data: AdtPanelItem[] }>(() => {
+  const adt = props.adt
+  if (!adt) return { group: "", data: [] }
+
+  const group = adt.access_self_as_arg
+  return {
+    group: "Access Adt through arguments:", data: [
+      gen(group.read, "Read", `Read Access to \`${adt.name}\` through a Function Argument`),
+      gen(group.write, "Write", `Write Access to \`${adt.name}\` through a Function Argument`),
+      // gen(group.other, "Unknown", "Other Access to Self through a function argument"),
+    ]
+  }
+})
+
+// As locals
+const group_access_self_as_locals = computed<{ group: string, data: AdtPanelItem[] }>(() => {
+  const adt = props.adt
+  if (!adt) return { group: "", data: [] }
+
+  const group = adt.access_self_as_locals
+  return {
+    group: "Access Adt through locals:", data: [
+      gen(group.read, "Read", `Read Access to \`${adt.name}\` through a Function Local`),
+      gen(group.write, "Write", `Write Access to \`${adt.name}\` through a Function Local`),
+      // gen(group.other, "Unknown", "Other Access to Self through a function local"),
+    ]
+  }
+})
+
+const adtItem = ref<AdtPanelItem>({ v_fn: [], kind: "", desc: "" })
+const search = ref<Search>({ withTags: false, unsafeOnly: false, text: "", page: 1, itemsPerPage: 20 })
+
+const items = computed<TreeItem[]>(() => {
+  const tree: TreeItem[] = []
+
+  const lenConstructor = constructors.value.v_fn.length
+  if (lenConstructor) {
+    const label = kindLabel(constructors.value)
+    tree.push({
+      label, id: label, onSelect: () => adtItem.value = constructors.value,
+      icon: "tabler:hexagon-letter-c-filled",
+    })
+  }
+
+  const fields = Object.entries(groupedFieldAccess.value)
+  if (fields.length) {
+    const fieldHeader: TreeItem = {
+      label: (fields.length === 1) ? "Access Field" : "Access Fields",
+      id: "Field", defaultExpanded: true, children: []
+    }
+    tree.push(fieldHeader)
+
+    for (const [field, v_data] of fields) {
+      const fieldItem: TreeItem = {
+        label: field, id: `Field@${field}`, defaultExpanded: true, children: [],
+        icon: "tabler:hexagon-letter-f-filled",
+      }
+      for (const data of v_data) {
+        fieldItem.children!.push({
+          label: kindLabel(data), id: `Field@${field}@kind@${data.kind}`,
+          onSelect: () => adtItem.value = data
+        })
+      }
+
+      fieldHeader.children!.push(fieldItem)
+    }
+  }
+
+  const as_arg = group_access_self_as_arg.value.data
+  const as_local = group_access_self_as_locals.value.data
+  if (as_arg.length && as_local.length) {
+    const headerLabel = "Access Self"
+    const header: TreeItem = {
+      label: headerLabel, id: headerLabel, defaultExpanded: true, children: []
+    }
+    tree.push(header)
+
+    if (as_arg.length) {
+      const argLabel = "As Arguments"
+      const argHeader: TreeItem = {
+        label: argLabel, id: argLabel, defaultExpanded: true, children: [],
+        icon: "tabler:hexagon-letter-a-filled",
+      }
+      header.children!.push(argHeader)
+
+      for (const data of as_arg) {
+        argHeader.children!.push({
+          label: kindLabel(data), id: `AsArg@${data.kind}`,
+          onSelect: () => adtItem.value = data
+        })
+      }
+    }
+
+    if (as_local.length) {
+      const localsLabel = "As Locals"
+      const localsHeader: TreeItem = {
+        label: localsLabel, id: localsLabel, defaultExpanded: true, children: [],
+        icon: "tabler:hexagon-letter-l-filled",
+      }
+      header.children!.push(localsHeader)
+
+      for (const data of as_local) {
+        localsHeader.children!.push({
+          label: kindLabel(data), id: `AsLocal@${data.kind}`,
+          onSelect: () => adtItem.value = data
+        })
+      }
+    }
+  }
+
+  return tree
+})
+
+const kindLabel = (item: AdtPanelItem) => `${item.kind} (${item.v_fn.length})`
+</script>
diff --git a/ui/nuxt.config.ts b/ui/nuxt.config.ts
index 685b4e0..83627fa 100644
--- a/ui/nuxt.config.ts
+++ b/ui/nuxt.config.ts
@@ -31,6 +31,10 @@ export default defineNuxtConfig({
         'tabler:search', // search
         'tabler:sitemap', // sidebar
         'tabler:browser-share', // share
+        'tabler:hexagon-letter-c-filled', // constructor
+        'tabler:hexagon-letter-f-filled', // field
+        'tabler:hexagon-letter-a-filled', // argument
+        'tabler:hexagon-letter-l-filled', // locals
       ],
     }
   },

From feca5905b836c6c64d92c3ca225281605eb611a0 Mon Sep 17 00:00:00 2001
From: zjp <jiping_zhou@foxmail.com>
Date: Fri, 30 Jan 2026 12:21:05 +0000
Subject: [PATCH 4/6] feat(ui): set default subpanel and selected node in adt
 popup

---
 ui/app/components/UPG.vue           | 12 ++--
 ui/app/components/code/AdtPopup.vue | 94 +++++++++++++++++++++++++----
 ui/app/lib/output/adt.ts            |  5 +-
 3 files changed, 93 insertions(+), 18 deletions(-)

diff --git a/ui/app/components/UPG.vue b/ui/app/components/UPG.vue
index c81042f..fcfc425 100644
--- a/ui/app/components/UPG.vue
+++ b/ui/app/components/UPG.vue
@@ -6,7 +6,7 @@
       v-model:panelContent="panelContent" v-model:adtOpts="adtOpts" />
     <UModal :ui="{ content: 'w-[80vw] max-w-none' }" v-model:open="adtClicked.open">
       <template #content>
-        <CodeAdtPopup :adt="adtOpts.data" :tags="tags" :unsafeFns="unsafeFns" />
+        <CodeAdtPopup :adt="adtOpts.data" :tags="tags" :unsafeFns="unsafeFns" :adtClicked="adtClicked" />
       </template>
     </UModal>
   </div>
@@ -93,11 +93,13 @@ const adtOpts = ref<AdtOpts>({});
 const adtClicked = ref<AdtClicked>({ open: false })
 watch(() => ({
   isAdtPanel: upPanel.value === Panel.Adt || downPanel.value === Panel.Adt,
-  adt: adtClicked.value.clickedAdt || adtClicked.value.clickedField
-}), ({ isAdtPanel, adt }) => {
+  isClicked: adtClicked.value.clickedAdt || adtClicked.value.clickedField,
+  adt: adtClicked.value
+}), ({ isAdtPanel, isClicked, adt }) => {
   // Auto open adt panel when side panels doesn't show adt panel, and user clicked adt or field.
-  if (!isAdtPanel && adt)
-    adtClicked.value = { open: true }
+  if (!isAdtPanel && isClicked) {
+    adtClicked.value = { open: true, lastClickedAdt: adt.clickedAdt, lastClickedField: adt.clickedField }
+  }
 })
 
 const share = ref<boolean>(false)
diff --git a/ui/app/components/code/AdtPopup.vue b/ui/app/components/code/AdtPopup.vue
index acefba6..6cd5016 100644
--- a/ui/app/components/code/AdtPopup.vue
+++ b/ui/app/components/code/AdtPopup.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="min-h-[75vh] flex">
-    <UTree :items="items" :get-key="item => item.id" class="w-50 h-full" expanded-icon="tabler:square-letter-f" />
+    <UTree :items="items" :get-key="item => item.id" v-model="active" class="w-50 h-full"
+      expanded-icon="tabler:square-letter-f" />
 
     <div class="w-full">
       <WidgetSearchFn :v_fn="adtItem.v_fn" :unsafeFns="unsafeFns" v-model="search" :title="adtItem.desc" />
@@ -9,12 +10,12 @@
 </template>
 
 <script setup lang="ts">
-import type { AdtPanelItem, DataAdt } from '~/lib/output/adt';
+import type { AdtClicked, AdtPanelItem, DataAdt } from '~/lib/output/adt';
 import { getTag, type DataTags } from '~/lib/output/tag';
 import type { Search, UnsafeFns } from '~/lib/topbar';
 import type { TreeItem } from '@nuxt/ui'
 
-const props = defineProps<{ adt?: DataAdt, tags: DataTags, unsafeFns: UnsafeFns }>()
+const props = defineProps<{ adt?: DataAdt, tags: DataTags, unsafeFns: UnsafeFns, adtClicked: AdtClicked }>()
 
 function gen(v: string[] | undefined, kind: string, desc: string) {
   const v_fn = v ? v.map(
@@ -88,19 +89,72 @@ const group_access_self_as_locals = computed<{ group: string, data: AdtPanelItem
   }
 })
 
+const active = ref<TreeItem>()
 const adtItem = ref<AdtPanelItem>({ v_fn: [], kind: "", desc: "" })
+
+// This is used to determine which subpanel is selected as per the click,
+enum Selected { Field, Constructor, AsArg, AsLocals }
+
+// The default selected item panel.
+const initAdtItem = () => {
+  let item: AdtPanelItem | undefined = undefined
+  let selected: Selected | undefined = undefined
+
+  const clicked = props.adtClicked
+  const field = clicked.lastClickedField
+  const fields = groupedFieldAccess.value
+  if (field) {
+    // field name in fn json includes the idx prefix like `0-fieldName`,
+    // while adt json only uses `fieldName` directly.
+    const fieldName = field.match(/[^-]+$/)?.[0]
+    item = fields[field]?.[0] || (fieldName ? fields[fieldName]?.[0] : undefined)
+    if (item) selected = Selected.Field
+  } else if (clicked.lastClickedAdt) {
+    if (constructors.value.v_fn.length) {
+      item = constructors.value
+      selected = Selected.Constructor
+    } else {
+      item = Object.values(fields)[0]?.[0]
+      if (item) selected = Selected.Field
+      else {
+        item = group_access_self_as_arg.value.data[0]
+        if (item) selected = Selected.AsArg
+        else {
+          item = group_access_self_as_locals.value.data[0]
+          if (item) selected = Selected.AsLocals
+        }
+      }
+    }
+  }
+
+  if (item) return { item, selected }
+}
+
 const search = ref<Search>({ withTags: false, unsafeOnly: false, text: "", page: 1, itemsPerPage: 20 })
 
 const items = computed<TreeItem[]>(() => {
   const tree: TreeItem[] = []
 
+  const initItem = initAdtItem()
+  let selected: Selected | undefined = undefined
+  if (initItem) {
+    // We must explicitly set adtItem, because active doesn't trigger onSelect.
+    adtItem.value = initItem.item
+    selected = initItem.selected
+  }
+
   const lenConstructor = constructors.value.v_fn.length
   if (lenConstructor) {
     const label = kindLabel(constructors.value)
-    tree.push({
+    const node = {
       label, id: label, onSelect: () => adtItem.value = constructors.value,
       icon: "tabler:hexagon-letter-c-filled",
-    })
+    }
+    tree.push(node)
+    if (selected === Selected.Constructor) {
+      active.value = node
+      selected = undefined
+    }
   }
 
   const fields = Object.entries(groupedFieldAccess.value)
@@ -117,10 +171,16 @@ const items = computed<TreeItem[]>(() => {
         icon: "tabler:hexagon-letter-f-filled",
       }
       for (const data of v_data) {
-        fieldItem.children!.push({
-          label: kindLabel(data), id: `Field@${field}@kind@${data.kind}`,
+        const label = kindLabel(data)
+        const node = {
+          label, id: `Field@${field}@kind@${data.kind}`,
           onSelect: () => adtItem.value = data
-        })
+        }
+        fieldItem.children!.push(node)
+        if (selected === Selected.Field) {
+          active.value = node
+          selected = undefined // don't set active again
+        }
       }
 
       fieldHeader.children!.push(fieldItem)
@@ -145,10 +205,15 @@ const items = computed<TreeItem[]>(() => {
       header.children!.push(argHeader)
 
       for (const data of as_arg) {
-        argHeader.children!.push({
+        const node = {
           label: kindLabel(data), id: `AsArg@${data.kind}`,
           onSelect: () => adtItem.value = data
-        })
+        }
+        argHeader.children!.push(node)
+        if (selected === Selected.Field) {
+          active.value = node
+          selected = undefined // don't set active again
+        }
       }
     }
 
@@ -161,10 +226,15 @@ const items = computed<TreeItem[]>(() => {
       header.children!.push(localsHeader)
 
       for (const data of as_local) {
-        localsHeader.children!.push({
+        const node = {
           label: kindLabel(data), id: `AsLocal@${data.kind}`,
           onSelect: () => adtItem.value = data
-        })
+        }
+        localsHeader.children!.push(node)
+        if (selected === Selected.Field) {
+          active.value = node
+          selected = undefined // don't set active again
+        }
       }
     }
   }
diff --git a/ui/app/lib/output/adt.ts b/ui/app/lib/output/adt.ts
index 766289c..86a1ac3 100644
--- a/ui/app/lib/output/adt.ts
+++ b/ui/app/lib/output/adt.ts
@@ -2,7 +2,10 @@ import type { SearchFnItem } from "../topbar"
 
 export type AdtOpts = { name?: string, data?: DataAdt }
 
-export type AdtClicked = { open: boolean, clickedAdt?: string, clickedField?: string }
+export type AdtClicked = {
+  open: boolean, clickedAdt?: string, clickedField?: string,
+  lastClickedAdt?: string, lastClickedField?: string,
+}
 
 export type DataAdt = {
   name: string,

From 2c33662f9f9c48dd62e8d020c8ea097babd1b568 Mon Sep 17 00:00:00 2001
From: zjp <jiping_zhou@foxmail.com>
Date: Fri, 30 Jan 2026 13:02:51 +0000
Subject: [PATCH 5/6] ui(AdtPopup): activate tree node and default to available
 write fn

---
 ui/app/components/code/AdtPopup.vue | 64 ++++++++++++++++++-----------
 1 file changed, 40 insertions(+), 24 deletions(-)

diff --git a/ui/app/components/code/AdtPopup.vue b/ui/app/components/code/AdtPopup.vue
index 6cd5016..064661d 100644
--- a/ui/app/components/code/AdtPopup.vue
+++ b/ui/app/components/code/AdtPopup.vue
@@ -95,10 +95,11 @@ const adtItem = ref<AdtPanelItem>({ v_fn: [], kind: "", desc: "" })
 // This is used to determine which subpanel is selected as per the click,
 enum Selected { Field, Constructor, AsArg, AsLocals }
 
-// The default selected item panel.
+// The default selected item panel (write).
 const initAdtItem = () => {
   let item: AdtPanelItem | undefined = undefined
   let selected: Selected | undefined = undefined
+  let selectedIdx: string | number | undefined = undefined
 
   const clicked = props.adtClicked
   const field = clicked.lastClickedField
@@ -107,27 +108,38 @@ const initAdtItem = () => {
     // field name in fn json includes the idx prefix like `0-fieldName`,
     // while adt json only uses `fieldName` directly.
     const fieldName = field.match(/[^-]+$/)?.[0]
-    item = fields[field]?.[0] || (fieldName ? fields[fieldName]?.[0] : undefined)
-    if (item) selected = Selected.Field
+    item = fields[field]?.at(-1) || (fieldName ? fields[fieldName]?.at(-1) : undefined)
+    if (item) {
+      selected = Selected.Field
+      selectedIdx = fieldName
+    }
   } else if (clicked.lastClickedAdt) {
     if (constructors.value.v_fn.length) {
       item = constructors.value
       selected = Selected.Constructor
     } else {
-      item = Object.values(fields)[0]?.[0]
-      if (item) selected = Selected.Field
-      else {
-        item = group_access_self_as_arg.value.data[0]
-        if (item) selected = Selected.AsArg
-        else {
-          item = group_access_self_as_locals.value.data[0]
-          if (item) selected = Selected.AsLocals
+      item = Object.values(fields)[0]?.at(-1)
+      if (item) {
+        selected = Selected.Field
+        // Default to write access
+        selectedIdx = -1
+      } else {
+        item = group_access_self_as_arg.value.data.at(-1)
+        if (item) {
+          selected = Selected.AsArg
+          selectedIdx = -1
+        } else {
+          item = group_access_self_as_locals.value.data.at(-1)
+          if (item) {
+            selected = Selected.AsLocals
+            selectedIdx = -1
+          }
         }
       }
     }
   }
 
-  if (item) return { item, selected }
+  if (item) return { item, selected, selectedIdx }
 }
 
 const search = ref<Search>({ withTags: false, unsafeOnly: false, text: "", page: 1, itemsPerPage: 20 })
@@ -137,10 +149,12 @@ const items = computed<TreeItem[]>(() => {
 
   const initItem = initAdtItem()
   let selected: Selected | undefined = undefined
+  let selectedIdx = undefined
   if (initItem) {
     // We must explicitly set adtItem, because active doesn't trigger onSelect.
     adtItem.value = initItem.item
     selected = initItem.selected
+    selectedIdx = initItem.selectedIdx
   }
 
   const lenConstructor = constructors.value.v_fn.length
@@ -177,14 +191,18 @@ const items = computed<TreeItem[]>(() => {
           onSelect: () => adtItem.value = data
         }
         fieldItem.children!.push(node)
-        if (selected === Selected.Field) {
-          active.value = node
-          selected = undefined // don't set active again
-        }
       }
 
       fieldHeader.children!.push(fieldItem)
     }
+    if (selected === Selected.Field) {
+      if (typeof selectedIdx === "string") {
+        const fieldName = selectedIdx
+        selectedIdx = fields.findIndex(([f, _]) => f === fieldName)
+        if (selectedIdx === -1) console.log(`${fieldName} is not a valid field in`, fields)
+      }
+      active.value = fieldHeader.children!.at(selectedIdx as number)!.children!.at(-1)
+    }
   }
 
   const as_arg = group_access_self_as_arg.value.data
@@ -210,10 +228,9 @@ const items = computed<TreeItem[]>(() => {
           onSelect: () => adtItem.value = data
         }
         argHeader.children!.push(node)
-        if (selected === Selected.Field) {
-          active.value = node
-          selected = undefined // don't set active again
-        }
+      }
+      if (selected === Selected.AsArg) {
+        active.value = argHeader.children!.at(selectedIdx as number)
       }
     }
 
@@ -231,10 +248,9 @@ const items = computed<TreeItem[]>(() => {
           onSelect: () => adtItem.value = data
         }
         localsHeader.children!.push(node)
-        if (selected === Selected.Field) {
-          active.value = node
-          selected = undefined // don't set active again
-        }
+      }
+      if (selected === Selected.AsLocals) {
+        active.value = localsHeader.children!.at(selectedIdx as number)
       }
     }
   }

From be1021990cfade86e55c2aca9bb14cd80a090d7b Mon Sep 17 00:00:00 2001
From: zjp <jiping_zhou@foxmail.com>
Date: Fri, 30 Jan 2026 13:10:34 +0000
Subject: [PATCH 6/6] chore(AdtPopup): set 76vw and default to unsafe fn only

---
 ui/app/components/UPG.vue           | 2 +-
 ui/app/components/code/AdtPopup.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/app/components/UPG.vue b/ui/app/components/UPG.vue
index fcfc425..2f29ff7 100644
--- a/ui/app/components/UPG.vue
+++ b/ui/app/components/UPG.vue
@@ -4,7 +4,7 @@
       :tags="tags" :unsafeFns="unsafeFns" />
     <Flow :nodeItem="nodeItem" :tags="tags" :adtClicked="adtClicked" v-model:flowOpts="flowOpts"
       v-model:panelContent="panelContent" v-model:adtOpts="adtOpts" />
-    <UModal :ui="{ content: 'w-[80vw] max-w-none' }" v-model:open="adtClicked.open">
+    <UModal :ui="{ content: 'w-[76vw] max-w-none' }" v-model:open="adtClicked.open">
       <template #content>
         <CodeAdtPopup :adt="adtOpts.data" :tags="tags" :unsafeFns="unsafeFns" :adtClicked="adtClicked" />
       </template>
diff --git a/ui/app/components/code/AdtPopup.vue b/ui/app/components/code/AdtPopup.vue
index 064661d..0159113 100644
--- a/ui/app/components/code/AdtPopup.vue
+++ b/ui/app/components/code/AdtPopup.vue
@@ -142,7 +142,7 @@ const initAdtItem = () => {
   if (item) return { item, selected, selectedIdx }
 }
 
-const search = ref<Search>({ withTags: false, unsafeOnly: false, text: "", page: 1, itemsPerPage: 20 })
+const search = ref<Search>({ withTags: false, unsafeOnly: true, text: "", page: 1, itemsPerPage: 20 })
 
 const items = computed<TreeItem[]>(() => {
   const tree: TreeItem[] = []