重构(前端): 重新组织状态监视器布局和快速搜索助手

将状态监视器模板重塑为分组的概览/模块部分，
以使结构与参考面板布局保持一致，并提高组件
可读性，以便后续进行 UI 迭代工作。

将全局快速搜索中的连接标签查找助手移至计算搜索结果之前，
以避免时间顺序问题，并使设置逻辑中的依赖关系流
更加清晰。

在 .helloagents 下添加用于状态监视器-参考布局对等的规划工件，
以跟踪提案上下文和实施任务。

packages/frontend/src/components/GlobalConnectionQuickSearch.vue

@@ -23,6 +23,24 @@ const inputRef = ref<HTMLInputElement | null>(null);
 const query = ref('');
 const selectedIndex = ref(0);
 
+const tagLookup = computed(() => {
+  const map = new Map<number, string>();
+  tags.value.forEach((tag) => {
+    map.set(tag.id, tag.name);
+  });
+  return map;
+});
+
+const getConnectionTagNames = (connection: ConnectionInfo): string[] => {
+  if (!connection.tag_ids?.length) {
+    return [];
+  }
+
+  return connection.tag_ids
+    .map((tagId) => tagLookup.value.get(tagId))
+    .filter((tagName): tagName is string => Boolean(tagName));
+};
+
 const results = computed(() => searchConnections(props.connections, query.value, 8, {
   getAdditionalFields: getConnectionTagNames,
 }));
@@ -97,24 +115,6 @@ const handleKeyDown = (event: KeyboardEvent) => {
 };
 
 const getConnectionLabel = (connection: ConnectionInfo): string => connection.name || connection.host;
-
-const tagLookup = computed(() => {
-  const map = new Map<number, string>();
-  tags.value.forEach((tag) => {
-    map.set(tag.id, tag.name);
-  });
-  return map;
-});
-
-const getConnectionTagNames = (connection: ConnectionInfo): string[] => {
-  if (!connection.tag_ids?.length) {
-    return [];
-  }
-
-  return connection.tag_ids
-    .map((tagId) => tagLookup.value.get(tagId))
-    .filter((tagName): tagName is string => Boolean(tagName));
-};
 </script>
 
 <template>