Added new modules and updated existing logic

dev/ui-ux/Codex : deepseek (not good)/src/components/agent-cell/agent-cell.js

@@ -0,0 +1,47 @@
+const { inject, computed } = Vue;
+
+export default {
+  name: 'AgentCell',
+  props: {
+    agent: { type: Object, required: true }
+  },
+  setup(props) {
+    const appState = inject('appState');
+
+    const compactClass = computed(() => appState.isCompact.value ? 'agent-cell-compact' : '');
+    const nameClass = computed(() => appState.isCompact.value ? 'agent-cell-name-compact' : 'agent-cell-name');
+    const highlightBtnClass = computed(() => [
+      'agent-cell-highlight-btn',
+      appState.highlightedRowId.value === props.agent.id ? 'agent-cell-highlight-btn-active' : ''
+    ]);
+
+    return { ...appState, compactClass, nameClass, highlightBtnClass };
+  },
+  template: `
+    <div
+      class="planner-grid-left-col agent-cell-root agent-row-left-col cursor-pointer agent-cell-hover-trigger relative-position"
+      :class="compactClass"
+      @click="openProfile(agent)"
+    >
+      <q-avatar :size="isCompact ? '24px' : '32px'" class="shadow-1">
+        <img :src="agent.avatar">
+      </q-avatar>
+      <div class="q-ml-sm overflow-hidden col">
+        <div class="text-weight-bold truncate" :class="nameClass">{{ agent.name }}</div>
+        <div v-if="!isCompact" class="agent-cell-role text-grey-5 uppercase text-weight-bold truncate">{{ agent.role }}</div>
+      </div>
+      <q-btn
+        round
+        flat
+        dense
+        :icon="highlightedRowId === agent.id ? 'visibility_off' : 'visibility'"
+        :color="highlightedRowId === agent.id ? 'amber-9' : 'grey-4'"
+        size="sm"
+        :class="highlightBtnClass"
+        @click.stop="toggleRowHighlight(agent.id)"
+      >
+        <q-tooltip>{{ highlightedRowId === agent.id ? 'Turn off reading mode' : 'Highlight Row' }}</q-tooltip>
+      </q-btn>
+    </div>
+  `
+};