@joewinke/jatui 0.1.6 → 0.1.9

package/src/lib/components/SearchDropdown.svelte

@@ -3,6 +3,7 @@
 		value: string;
 		label: string;
 		icon?: string;
+		image?: string;  // URL for avatar/thumbnail image
 	};
 
 	export type SearchDropdownGroup = {
@@ -15,12 +16,16 @@
 	import { tick } from 'svelte';
 	import { slide } from 'svelte/transition';
 
+	import type { Snippet } from 'svelte';
+
 	let {
 		value = '',
 		groups = [],
 		placeholder = 'Filter...',
 		disabled = false,
 		displayValue,
+		colorFn,
+		footer,
 		onChange,
 	}: {
 		value: string;
@@ -28,6 +33,8 @@
 		placeholder?: string;
 		disabled?: boolean;
 		displayValue?: string;
+		colorFn?: (value: string) => string | undefined;
+		footer?: Snippet;
 		onChange: (value: string) => void;
 	} = $props();
 
@@ -47,6 +54,8 @@
 
 	const triggerLabel = $derived(displayValue || selectedOption?.label || value || placeholder);
 	const triggerIcon = $derived(selectedOption?.icon || '');
+	const triggerImage = $derived(selectedOption?.image || '');
+	const activeColor = $derived(colorFn ? colorFn(value) : undefined);
 
 	const filteredGroups = $derived.by(() => {
 		if (!searchQuery.trim()) return groups;
@@ -61,6 +70,13 @@
 		return result;
 	});
 
+	// Generate a deterministic hue from a string for initials avatars
+	function nameHue(s: string): number {
+		let h = 0;
+		for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) & 0xffff;
+		return h % 360;
+	}
+
 	function select(optionValue: string) {
 		open = false;
 		searchQuery = '';
@@ -88,11 +104,20 @@
 		type="button"
 		class="sd-trigger"
 		class:sd-disabled={disabled}
+		style={activeColor ? `border-left-color: ${activeColor}; border-left-width: 3px; color: ${activeColor};` : ''}
 		onclick={() => { if (!disabled) open = !open; }}
 		{disabled}
 	>
 		<span class="sd-trigger-label">
-			{#if triggerIcon}<span class="sd-trigger-icon">{triggerIcon}</span>{/if}
+			{#if triggerImage}
+				<img src={triggerImage} alt="" class="sd-avatar" />
+			{:else if triggerIcon}
+				<span class="sd-trigger-icon">{triggerIcon}</span>
+			{:else if selectedOption && selectedOption.value}
+				<span class="sd-avatar sd-avatar-initials" style="background:oklch(0.55 0.15 {nameHue(selectedOption.label)})">
+					{selectedOption.label.charAt(0).toUpperCase()}
+				</span>
+			{/if}
 			<span class="truncate">{triggerLabel}</span>
 		</span>
 		<svg class="sd-chevron" class:sd-chevron-open={open} fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -123,7 +148,7 @@
 						autocomplete="off"
 					/>
 					{#if searchQuery}
-						<button type="button" onclick={() => { searchQuery = ''; searchInput?.focus(); }} class="sd-search-clear">
+						<button type="button" onclick={() => { searchQuery = ''; searchInput?.focus(); }} class="sd-search-clear" aria-label="Clear search">
 							<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
 						</button>
 					{/if}
@@ -144,8 +169,17 @@
 									onclick={() => select(option.value)}
 									class="sd-option"
 									class:sd-option-selected={value === option.value}
+									style={colorFn && colorFn(option.value) ? `border-left-color: ${colorFn(option.value)}; color: ${colorFn(option.value)};` : ''}
 								>
-									{#if option.icon}<span class="sd-option-icon">{option.icon}</span>{/if}
+									{#if option.image}
+										<img src={option.image} alt="" class="sd-avatar" />
+									{:else if option.icon}
+										<span class="sd-option-icon">{option.icon}</span>
+									{:else if option.value}
+										<span class="sd-avatar sd-avatar-initials" style="background:oklch(0.55 0.15 {nameHue(option.label)})">
+											{option.label.charAt(0).toUpperCase()}
+										</span>
+									{/if}
 									<span class="truncate">{option.label}</span>
 									{#if value === option.value}
 										<svg class="sd-check" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
@@ -158,6 +192,11 @@
 					<li class="sd-empty">No matches for "{searchQuery}"</li>
 				{/if}
 			</ul>
+			{#if footer}
+				<div class="sd-footer">
+					{@render footer()}
+				</div>
+			{/if}
 		</div>
 	{/if}
 </div>
@@ -213,6 +252,22 @@
 		flex-shrink: 0;
 		font-size: 0.75rem;
 	}
+	.sd-avatar {
+		width: 1.25rem;
+		height: 1.25rem;
+		border-radius: 50%;
+		object-fit: cover;
+		flex-shrink: 0;
+	}
+	.sd-avatar-initials {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 0.6rem;
+		font-weight: 700;
+		color: #fff;
+		line-height: 1;
+	}
 
 	.sd-chevron {
 		width: 0.75rem;
@@ -339,6 +394,10 @@
 		color: var(--sd-success);
 	}
 
+	.sd-footer {
+		border-top: 1px solid var(--sd-border);
+	}
+
 	.sd-empty {
 		padding: 0.75rem;
 		text-align: center;

package/src/lib/components/SidebarUserFooter.svelte

@@ -0,0 +1,34 @@
+<!--
+  SidebarUserFooter — avatar + name (links to account) + sign out button.
+  Placed at the bottom of app sidebar drawers (admin, facilitator, portal).
+  Used in JST template layouts.
+-->
+<script lang="ts">
+  import UserAvatar from './UserAvatar.svelte'
+
+  interface Props {
+    profile?: { full_name?: string | null; avatar_url?: string | null } | null
+    user?: { email?: string | null } | null
+    /** Where the avatar/name links to. Defaults to /account */
+    accountHref?: string
+    /** Sign out URL. Defaults to /account/sign_out */
+    signOutHref?: string
+  }
+
+  let {
+    profile,
+    user,
+    accountHref = '/account',
+    signOutHref = '/account/sign_out',
+  }: Props = $props()
+
+  let displayName = $derived(profile?.full_name || user?.email || '?')
+</script>
+
+<div class="flex items-center gap-2 px-2 py-1">
+  <a href={accountHref} class="flex items-center gap-2 flex-1 min-w-0" title="Account settings">
+    <UserAvatar name={profile?.full_name} email={user?.email} avatarUrl={profile?.avatar_url} size="sm" />
+    <span class="truncate text-sm">{displayName}</span>
+  </a>
+  <a href={signOutHref} class="btn btn-ghost btn-xs shrink-0">Sign out</a>
+</div>

package/src/lib/components/SignaturePad.svelte

@@ -136,12 +136,12 @@
 <div class="signature-pad-container">
 	{#if label}
 		<div class="flex justify-between items-center mb-2">
-			<label class="text-sm text-base-content/70">
+			<span class="text-sm text-base-content/70">
 				{label}
 				{#if required}
 					<span class="text-error">*</span>
 				{/if}
-			</label>
+			</span>
 			<button type="button" onclick={() => clear()} class="btn btn-ghost btn-xs">
 				Clear
 			</button>

package/src/lib/components/SortDropdown.svelte

@@ -102,7 +102,8 @@
 
 <div class="flex items-center gap-1">
 	<!-- Sort dropdown -->
-	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div class="dropdown dropdown-end flex-shrink-0" onclick={(e) => e.stopPropagation()}>
 		<button
 			tabindex="0"
@@ -134,7 +135,8 @@
 
 	<!-- Filter input (optional) -->
 	{#if showFilter}
-		<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div class="flex-shrink-0" onclick={(e) => e.stopPropagation()}>
 			<input
 				type="text"

package/src/lib/components/VoicePlayer.svelte

@@ -233,6 +233,7 @@
 
 {#if text && text.trim()}
   <div class="flex items-center gap-1 justify-end">
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
       class="relative"
       onmouseenter={() => (showControls = true)}

package/src/lib/components/messaging/ChannelInfoModal.svelte

@@ -96,12 +96,12 @@
       {#if isEditing}
         <div class="space-y-4">
           <div>
-            <label class="label"><span class="label-text font-medium">Name</span></label>
-            <input type="text" bind:value={editName} class="input input-bordered w-full" maxlength="80" />
+            <label for="channel-info-name" class="label"><span class="label-text font-medium">Name</span></label>
+            <input id="channel-info-name" type="text" bind:value={editName} class="input input-bordered w-full" maxlength="80" />
           </div>
           <div>
-            <label class="label"><span class="label-text font-medium">Description</span></label>
-            <textarea bind:value={editDescription} class="textarea textarea-bordered w-full" rows="3" maxlength="250"></textarea>
+            <label for="channel-info-description" class="label"><span class="label-text font-medium">Description</span></label>
+            <textarea id="channel-info-description" bind:value={editDescription} class="textarea textarea-bordered w-full" rows="3" maxlength="250"></textarea>
           </div>
           <div class="flex gap-2">
             <button class="btn btn-primary btn-sm" onclick={saveEdit} disabled={saving || !editName.trim()}>

package/src/lib/components/messaging/CreateChannelModal.svelte

@@ -126,20 +126,20 @@
             {selectedEmoji}
           </button>
           <div class="flex-1">
-            <label class="label"><span class="label-text font-medium">Channel Name</span></label>
-            <input type="text" bind:value={channelName} class="input input-bordered w-full" placeholder="e.g., general, announcements" maxlength="80" />
+            <label for="create-channel-name" class="label"><span class="label-text font-medium">Channel Name</span></label>
+            <input id="create-channel-name" type="text" bind:value={channelName} class="input input-bordered w-full" placeholder="e.g., general, announcements" maxlength="80" />
           </div>
         </div>
 
         <!-- Description -->
         <div>
-          <label class="label"><span class="label-text font-medium">Description</span></label>
-          <textarea bind:value={description} class="textarea textarea-bordered w-full" placeholder="What's this channel about?" rows="2" maxlength="250"></textarea>
+          <label for="create-channel-description" class="label"><span class="label-text font-medium">Description</span></label>
+          <textarea id="create-channel-description" bind:value={description} class="textarea textarea-bordered w-full" placeholder="What's this channel about?" rows="2" maxlength="250"></textarea>
         </div>
 
         <!-- Channel type -->
         <div>
-          <label class="label"><span class="label-text font-medium">Channel Type</span></label>
+          <span class="label"><span class="label-text font-medium">Channel Type</span></span>
           <div class="flex gap-3">
             <label class="cursor-pointer flex items-center gap-2">
               <input type="radio" name="channelType" class="radio radio-primary" bind:group={channelType} value="public" />
@@ -154,8 +154,8 @@
 
         <!-- Member selection -->
         <div>
-          <label class="label"><span class="label-text font-medium">Add Members ({selectedMembers.length})</span></label>
-          <input type="text" bind:value={searchQuery} class="input input-bordered input-sm w-full mb-2" placeholder="Search members..." />
+          <label for="create-channel-member-search" class="label"><span class="label-text font-medium">Add Members ({selectedMembers.length})</span></label>
+          <input id="create-channel-member-search" type="text" bind:value={searchQuery} class="input input-bordered input-sm w-full mb-2" placeholder="Search members..." />
           <div class="max-h-40 overflow-y-auto space-y-1">
             {#each filteredMembers as member}
               <button type="button" class="w-full flex items-center gap-3 px-2 py-1.5 rounded hover:bg-base-200 transition-colors" onclick={() => toggleMember(member.id)}>

package/src/lib/components/messaging/MessageAttachment.svelte

@@ -150,6 +150,7 @@
   const canDelete = $derived(showDelete && currentUserId === attachment.uploaded_by)
 </script>
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div class="relative group {className}" oncontextmenu={handleContextMenu}>
   {#if loading}
     <div class="flex items-center justify-center bg-base-200 rounded-lg {compact ? 'w-16 h-16' : 'w-48 h-32'}">
@@ -203,7 +204,9 @@
 
 <!-- Context Menu -->
 {#if showContextMenu}
-  <div class="fixed z-50 bg-base-100 rounded-lg shadow-xl border border-base-300 py-1 min-w-[160px]" style="left: {contextMenuPosition.x}px; top: {contextMenuPosition.y}px;" onclick={(e) => e.stopPropagation()} role="menu">
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="fixed z-50 bg-base-100 rounded-lg shadow-xl border border-base-300 py-1 min-w-[160px]" style="left: {contextMenuPosition.x}px; top: {contextMenuPosition.y}px;" onclick={(e) => e.stopPropagation()} role="menu" tabindex="-1">
     <button class="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-base-200 transition-colors" onclick={handleOpenInNewTab} role="menuitem">↗ Open in new tab</button>
     <button class="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-base-200 transition-colors" onclick={handleDownload} role="menuitem">⬇ Download</button>
     <button class="w-full flex items-center gap-2 px-3 py-2 text-sm hover:bg-base-200 transition-colors" onclick={handleCopyLink} role="menuitem">📋 Copy link</button>

package/src/lib/components/messaging/MessageInput.svelte

@@ -334,6 +334,7 @@
 
 <input bind:this={fileInputRef} type="file" accept="image/jpeg,image/png,image/gif,image/webp,video/mp4,video/webm,video/quicktime,application/pdf" multiple class="hidden" onchange={handleFileSelect} {disabled} />
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div class="flex flex-col gap-2 relative" ondragenter={handleDragEnter} ondragleave={handleDragLeave} ondragover={handleDragOver} ondrop={handleDrop}>
   {#if isDragging}
     <div class="absolute inset-0 z-50 bg-primary/10 border-2 border-dashed border-primary rounded-lg flex items-center justify-center pointer-events-none">

package/src/lib/components/messaging/NotificationSettingsModal.svelte

@@ -165,12 +165,12 @@
           {#if globalSettings.quiet_hours_enabled}
             <div class="flex gap-3">
               <div class="flex-1">
-                <label class="label"><span class="label-text text-xs">Start</span></label>
-                <input type="time" bind:value={globalSettings.quiet_hours_start} class="input input-bordered input-sm w-full" />
+                <label for="notif-quiet-hours-start" class="label"><span class="label-text text-xs">Start</span></label>
+                <input id="notif-quiet-hours-start" type="time" bind:value={globalSettings.quiet_hours_start} class="input input-bordered input-sm w-full" />
               </div>
               <div class="flex-1">
-                <label class="label"><span class="label-text text-xs">End</span></label>
-                <input type="time" bind:value={globalSettings.quiet_hours_end} class="input input-bordered input-sm w-full" />
+                <label for="notif-quiet-hours-end" class="label"><span class="label-text text-xs">End</span></label>
+                <input id="notif-quiet-hours-end" type="time" bind:value={globalSettings.quiet_hours_end} class="input input-bordered input-sm w-full" />
               </div>
             </div>
           {/if}
@@ -197,8 +197,8 @@
             </label>
           </div>
           <div>
-            <label class="label"><span class="label-text font-medium">Notification Level</span></label>
-            <select bind:value={channelPrefs.notification_level} class="select select-bordered w-full">
+            <label for="notif-channel-level" class="label"><span class="label-text font-medium">Notification Level</span></label>
+            <select id="notif-channel-level" bind:value={channelPrefs.notification_level} class="select select-bordered w-full">
               <option value="all">All Messages</option>
               <option value="mentions">Mentions Only</option>
               <option value="none">None</option>

package/src/lib/index.ts

@@ -1,5 +1,6 @@
 // Components — Universal
 export { default as UserAvatar } from './components/UserAvatar.svelte';
+export { default as SidebarUserFooter } from './components/SidebarUserFooter.svelte';
 
 // Components — from JAT IDE
 export { default as SearchDropdown } from './components/SearchDropdown.svelte';
@@ -9,6 +10,7 @@ export { default as ResizableDivider } from './components/ResizableDivider.svelt
 export { default as DateRangePicker } from './components/DateRangePicker.svelte';
 export { default as SortDropdown } from './components/SortDropdown.svelte';
 export { default as InlineEdit } from './components/InlineEdit.svelte';
+export { default as FloatingActionBar } from './components/FloatingActionBar.svelte';
 
 // Components — from Flush
 export { default as Button } from './components/Button.svelte';
@@ -39,6 +41,14 @@ export { default as SpeechForm } from './components/SpeechForm.svelte';
 export { default as ThemeSelector } from './components/ThemeSelector.svelte';
 export { default as Sparkline } from './components/Sparkline.svelte';
 
+// Components — from JST
+export { default as AvatarUpload } from './components/AvatarUpload.svelte';
+export { default as PdfThumbnail } from './components/PdfThumbnail.svelte';
+export { default as FilePicker } from './components/FilePicker.svelte';
+
+// FilePicker types
+export type { FilePickerFile, FilePickerSelection } from './types/filePicker';
+
 // Components — Emoji
 export { default as EmojiPicker } from './components/EmojiPicker.svelte';
 
@@ -51,6 +61,8 @@ export { default as LinkShortener } from './components/LinkShortener.svelte';
 
 // Components — from Marduk
 export { default as SignaturePad } from './components/SignaturePad.svelte';
+export { default as MilestoneCard } from './components/MilestoneCard.svelte';
+export { default as MilestoneTimeline } from './components/MilestoneTimeline.svelte';
 export { default as TimeSlotPicker } from './components/TimeSlotPicker.svelte';
 export { default as CalendarPicker } from './components/CalendarPicker.svelte';
 export { default as AvailabilityModal } from './components/AvailabilityModal.svelte';
@@ -64,11 +76,15 @@ export type { SearchDropdownOption, SearchDropdownGroup } from './components/Sea
 export type { ChipSuggestion, SuggestionGroup, ChipInfo } from './components/ChipInput.svelte';
 export type { SortOption } from './components/SortDropdown.svelte';
 export type { DisplaySegment } from './components/InlineEdit.svelte';
+export type { ActionButton, ActionDropdown, DropdownItem } from './components/FloatingActionBar.svelte';
 
 // Component types — Flush
 export type { SelectOption } from './components/SelectInput.svelte';
 export type { StatusValue } from './components/StatusBadge.svelte';
 
+// Milestone types (from JST contract/billing)
+export type { Milestone, MilestoneStatus } from './types/milestone';
+
 // Booking types (centralized)
 export type {
 	LocationType,
@@ -102,8 +118,17 @@ export {
 	formatDate,
 	getTimeSinceMs,
 	getTimeSinceMinutes,
-	isWithinMinutes
+	isWithinMinutes,
+	formatDateTime,
+	taskAge,
 } from './utils/dateFormatters';
+// Utilities — task display helpers
+export {
+	statusColor,
+	priorityColor,
+	typeIcon,
+	statusLabel,
+} from './utils/taskUtils';
 
 // Utilities — phone formatting
 export {

package/src/lib/types/filePicker.ts

@@ -0,0 +1,14 @@
+export interface FilePickerFile {
+  id: string
+  name: string
+  created_at: string
+  updated_at: string
+  metadata: Record<string, any>
+  scope: "personal" | "team"
+}
+
+export interface FilePickerSelection {
+  file: FilePickerFile
+  url: string
+  downloadUrl: string
+}

package/src/lib/types/milestone.ts

@@ -0,0 +1,22 @@
+/**
+ * Generic milestone/timeline types for stepped workflows.
+ *
+ * Used by MilestoneCard and MilestoneTimeline components.
+ * Projects extend this with domain-specific fields (e.g. stripe_invoice_id).
+ */
+
+export type MilestoneStatus = "pending" | "delivered" | "accepted" | "paid"
+
+export interface Milestone {
+  id: string
+  name: string
+  description: string
+  percentage: number
+  amount: number
+  acceptance_criteria: string
+  status: MilestoneStatus
+  sort_order: number
+  delivered_at: string | null
+  accepted_at: string | null
+  paid_at: string | null
+}

package/src/lib/utils/dateFormatters.ts

@@ -151,3 +151,44 @@ export function getTimeSinceMinutes(timestamp: string | null | undefined): numbe
 export function isWithinMinutes(timestamp: string | null | undefined, minutes: number): boolean {
 	return getTimeSinceMinutes(timestamp) < minutes;
 }
+
+/**
+ * Format date + time for detail views (e.g. "Jan 5, 2:30 PM").
+ * No year — use formatFullDate when year is needed.
+ */
+export function formatDateTime(dateStr: string | null | undefined): string {
+	if (!dateStr) return '';
+	const date = parseTimestamp(dateStr);
+	if (!date) return '';
+	return date.toLocaleString(undefined, {
+		month: 'short',
+		day: 'numeric',
+		hour: 'numeric',
+		minute: '2-digit',
+	});
+}
+
+/**
+ * Color-coded relative age for task rows.
+ * Returns a label (e.g. "3d", "2w") and an oklch color string
+ * that shifts from green (fresh) → blue → amber → orange → red (stale).
+ *
+ * Usage:
+ *   const age = taskAge(task.created_at)
+ *   // <span style="color: {age.color}">{age.label}</span>
+ */
+export function taskAge(dateStr: string): { label: string; color: string } {
+	const now = Date.now();
+	const created = new Date(dateStr).getTime();
+	const minutes = Math.floor((now - created) / 60000);
+	const hours = Math.floor(minutes / 60);
+	const days = Math.floor(hours / 24);
+	const weeks = Math.floor(days / 7);
+	const months = Math.floor(days / 30);
+	if (minutes < 60) return { label: `${minutes}m`, color: 'oklch(0.75 0.18 145)' }; // green — fresh
+	if (hours < 24)   return { label: `${hours}h`,   color: 'oklch(0.75 0.18 145)' }; // green
+	if (days < 3)     return { label: `${days}d`,    color: 'oklch(0.70 0.15 200)' }; // blue — recent
+	if (days < 7)     return { label: `${days}d`,    color: 'oklch(0.75 0.15 85)'  }; // amber — aging
+	if (weeks < 4)    return { label: `${weeks}w`,   color: 'oklch(0.65 0.18 50)'  }; // orange — stale
+	return                   { label: `${months}mo`, color: 'oklch(0.65 0.20 25)'  }; // red — old
+}

package/src/lib/utils/taskUtils.ts

@@ -0,0 +1,59 @@
+/**
+ * Shared helpers for project_tasks UI.
+ * Used across all JST-based projects on tasks/feedback pages.
+ */
+
+/**
+ * DaisyUI badge class for a task status value.
+ * Usage: <span class="badge {statusColor(task.status)}">...</span>
+ */
+export function statusColor(status: string): string {
+	switch (status) {
+		case 'open':        return 'badge-ghost';
+		case 'in_progress': return 'badge-warning';
+		case 'waiting':     return 'badge-warning badge-outline';
+		case 'blocked':     return 'badge-error badge-outline';
+		case 'submitted':   return 'badge-info';
+		case 'accepted':    return 'badge-success';
+		case 'deployed':    return 'badge-success badge-outline';
+		case 'closed':      return 'badge-neutral';
+		case 'dev':         return 'badge-ghost badge-outline';
+		default:            return 'badge-ghost';
+	}
+}
+
+/**
+ * Tailwind text class for a task priority value.
+ * Usage: <span class={priorityColor(task.priority)}>...</span>
+ */
+export function priorityColor(priority: string | null | undefined): string {
+	switch (priority) {
+		case 'critical': return 'text-error font-bold';
+		case 'high':     return 'text-warning font-semibold';
+		case 'medium':   return 'text-info';
+		case 'low':      return 'text-base-content/60';
+		default:         return '';
+	}
+}
+
+/**
+ * Emoji icon for a task issue_type value.
+ * Usage: {typeIcon(task.issue_type)} {task.title}
+ */
+export function typeIcon(type: string): string {
+	switch (type) {
+		case 'bug':     return '🐛';
+		case 'feature': return '✨';
+		case 'task':    return '📋';
+		case 'epic':    return '🏔️';
+		default:        return '📄';
+	}
+}
+
+/**
+ * Human-readable label for a task status value.
+ * "in_progress" → "In Progress"
+ */
+export function statusLabel(status: string): string {
+	return status.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+}