frontend/src/
├── api/                  # Generated API client
│   ├── sdk.gen.ts        # API methods
│   └── types.gen.ts      # API types
│
├── components/           # Reusable components
│   ├── core/             # Core UI components
│   ├── item/             # Item-related components
│   ├── board/            # Board-related components
│   └── ...
│
├── composables/          # Composition functions
│   ├── useItemPresence.ts
│   ├── useDescriptionDraft.ts
│   └── ...
│
├── models/               # TypeScript interfaces
│
├── pages/                # Route pages
│   ├── boards/
│   ├── items/
│   └── settings/
│
├── store/                # Pinia stores
│   ├── authStore.ts
│   ├── organizationStore.ts
│   └── ...
│
├── styles/               # Global styles
│   └── app.scss
│
├── utils/                # Utility functions
│
└── App.vue               # Root component

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useOrganizationStore } from '@/store/organizationStore';

// Props
const props = defineProps<{
  itemId: string;
  readonly?: boolean;
}>();

// Emits
const emit = defineEmits<{
  (e: 'update', value: string): void;
  (e: 'close'): void;
}>();

// Store
const orgStore = useOrganizationStore();

// Reactive state
const isLoading = ref(false);
const title = ref('');

// Computed
const isValid = computed(() => title.value.length > 0);

// Methods
async function save() {
  isLoading.value = true;
  try {
    await api.updateItem(props.itemId, { title: title.value });
    emit('update', title.value);
  } finally {
    isLoading.value = false;
  }
}

// Lifecycle
onMounted(() => {
  // Initialize
});
</script>

// store/organizationStore.ts
import { defineStore } from 'pinia';
import { OrganizationService } from '@/api';

export const useOrganizationStore = defineStore('organization', {
  state: () => ({
    activeOrganization: null as Organization | null,
    organizations: [] as Organization[],
    isLoading: false,
  }),

  getters: {
    organizationId: (state) => state.activeOrganization?.id ?? '',

    hasMultipleOrgs: (state) => state.organizations.length > 1,
  },

  actions: {
    async fetchOrganizations() {
      this.isLoading = true;
      try {
        const response = await OrganizationService.getOrganizations();
        this.organizations = response.data;
      } finally {
        this.isLoading = false;
      }
    },

    setActiveOrganization(org: Organization) {
      this.activeOrganization = org;
    },
  },
});

// composables/useItemPresence.ts
import { ref, computed, onUnmounted } from 'vue';

export function useItemPresence(
  itemNumber: () => string | undefined,
  currentUserId: () => string
) {
  const members = ref<Map<string, PresenceMember>>(new Map());
  const isSubscribed = ref(false);

  const otherMembers = computed(() => {
    return Array.from(members.value.values())
      .filter(m => m.userId !== currentUserId());
  });

  function subscribe() {
    // Subscribe to presence channel
  }

  function unsubscribe() {
    // Cleanup
  }

  onUnmounted(() => {
    unsubscribe();
  });

  return {
    members,
    otherMembers,
    isSubscribed,
    subscribe,
    unsubscribe,
  };
}

✅ Good:
- ItemDrawer.vue
- BoardSelector.vue
- WorkItemCard.vue

❌ Bad:
- Drawer.vue
- Selector.vue
- Card.vue

<!-- ❌ WRONG - numbered colors -->
<div class="tw-text-gray-500 tw-bg-blue-600">

<!-- ✅ CORRECT - semantic colors -->
<div class="tw-text-gray-medium tw-bg-blue">

import { useThemedColors } from '@/utils/color';

const { appColors } = useThemedColors();

// Access colors - automatically updates when theme changes
const blueColor = appColors.value.blue;       // "rgb(0, 153, 255)"
const grayDark = appColors.value['gray-dark']; // "rgb(90, 90, 90)"

<!-- Form inputs: border color change only, NO outline -->
<q-input class="focus-within:tw-border-blue" />

<!-- Buttons: 1px outline with 1px offset -->
<q-btn class="focus:tw-outline focus:tw-outline-1 focus:tw-outline-offset-1" />

const { modalRef, showPopup, closePopup, handleShow, handleHide } =
  useChooserModal({ emit });

import { returnFocusToTrigger } from '@/utils/returnFocusToTrigger';

function onHide() {
  returnFocusToTrigger(triggerElement);
}

const pendingFocusEntryId = ref<string | null>(null);

async function handleSave(entryId: string) {
  pendingFocusEntryId.value = entryId;  // Store BEFORE save
  await saveEntry(entryId, data);
}

watch(() => entries.value.length, () => {
  if (pendingFocusEntryId.value) {
    nextTick(() => {
      focusRowById(pendingFocusEntryId.value);
      pendingFocusEntryId.value = null;
    });
  }
});

<div
  data-navigable="true"
  tabindex="0"
  role="option"
  :aria-selected="isSelected"
>
  <!-- Item content -->
</div>

<!-- For hierarchical items (folders) - prevents auto-save on Enter -->
<div data-navigable="true" data-hierarchical="true">

<!-- For disabled items -->
<div data-navigable="true" data-disabled="true">

function handleDocumentKeydown(event: KeyboardEvent) {
  if (drawerOpen.value) return;                                    // Guard 1
  if (!tableEl.value?.rootEl?.contains(focusedElement)) return;    // Guard 2
  if (focusedElement?.closest('[data-table-type="subtask"]')) return; // Guard 3
}

// ❌ WRONG - Custom/inconsistent names
emit('user-selected', user);
emit('work-type-clicked', item);
emit('onSave', data);

// ✅ CORRECT - Standard names
emit('item-selected', item);   // Single mode
emit('item-toggled', item);    // Multi mode
emit('save', data);
emit('update:modelValue', value);

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void;
  (e: 'save', data: FormData): void;
  (e: 'cancel'): void;
  (e: 'item-selected', item: Item): void;
}>();

<template>
  <div class="tw-relative">
    <inner-loader :visible="isLoading" size="30px" />
    <div v-if="!isLoading">
      <!-- Content -->
    </div>
  </div>
</template>

<script setup lang="ts">
import InnerLoader from '@/components/core/InnerLoader.vue';
</script>

<template>
  <div v-if="isLoading">
    <q-skeleton type="text" width="200px" />
    <q-skeleton type="rect" height="100px" class="tw-mt-2" />
  </div>
  <div v-else>
    <!-- Actual content -->
  </div>
</template>

import { ChannelEvents } from '@/store/events';

// Listen for events
ChannelEvents.on('item-updated', (event) => {
  console.log('Item updated:', event.data);
});

// Clean up
onUnmounted(() => {
  ChannelEvents.off('item-updated', handler);
});

import { useItemPresence } from '@/composables/useItemPresence';

const presence = useItemPresence(
  () => item.value?.number,
  () => authStore.user?.id ?? ''
);

// Subscribe when component mounts
onMounted(() => presence.subscribe());

// Check who else is present
const othersViewing = presence.otherMembers;

// router/index.ts
const routes = [
  {
    path: '/boards',
    component: () => import('@/pages/boards/BoardsPage.vue'),
    meta: { requiresAuth: true },
  },
  {
    path: '/boards/:boardId',
    component: () => import('@/pages/boards/BoardDetailPage.vue'),
    props: true,
  },
];

router.beforeEach(async (to, from, next) => {
  const authStore = useAuthStore();

  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
    return next('/login');
  }

  next();
});

import { mount } from '@vue/test-utils';
import ItemCard from '@/components/item/ItemCard.vue';

describe('ItemCard', () => {
  it('renders item title', () => {
    const wrapper = mount(ItemCard, {
      props: {
        item: { number: 'ITEM-1', title: 'Test Item' },
      },
    });

    expect(wrapper.text()).toContain('Test Item');
  });
});

cd frontend
pnpm test

# Start development server
./ds run ui

# Build for production
cd frontend && pnpm build:ui

# Type check
cd frontend && pnpm check:ts

# Lint
cd frontend && pnpm lint