@hienlh/ppm 0.10.2 → 0.10.4

package/src/services/slash-discovery/cache.ts

@@ -0,0 +1,38 @@
+import type { SlashItem } from "./types.ts";
+
+interface CacheEntry {
+  items: SlashItem[];
+  cachedAt: number;
+}
+
+/** In-memory cache keyed by projectPath */
+const cache = new Map<string, CacheEntry>();
+
+/** Default TTL: 5 minutes */
+const DEFAULT_TTL_MS = 5 * 60 * 1000;
+
+/** Get cached items if still valid, or null */
+export function getCached(projectPath: string): SlashItem[] | null {
+  const entry = cache.get(projectPath);
+  if (!entry) return null;
+  if (Date.now() - entry.cachedAt > DEFAULT_TTL_MS) {
+    cache.delete(projectPath);
+    return null;
+  }
+  return entry.items;
+}
+
+/** Store items in cache */
+export function setCache(projectPath: string, items: SlashItem[]): void {
+  cache.set(projectPath, { items, cachedAt: Date.now() });
+}
+
+/** Invalidate cache for a specific project */
+export function invalidateCache(projectPath: string): void {
+  cache.delete(projectPath);
+}
+
+/** Invalidate all cached entries */
+export function invalidateAll(): void {
+  cache.clear();
+}

package/src/services/slash-discovery/fuzzy-search.ts

@@ -46,18 +46,21 @@ export function scoreFuzzy(query: string, candidate: string): FuzzyScore | null
 
 /**
  * Search slash items by query with fuzzy matching.
+ * Recently used items get a rank boost (sorted earlier within same rank tier).
  * Returns ranked results (best match first), truncated to limit.
  */
 export function searchSlashItems(
   items: SlashItem[],
   query: string,
   limit = 20,
+  recentNames: string[] = [],
 ): SlashItem[] {
   if (!query) return items;
   // Cap query length to prevent quadratic blowup in Levenshtein
   query = query.slice(0, 50);
 
-  const scored: Array<{ item: SlashItem; rank: number; distance: number }> = [];
+  const recentSet = new Set(recentNames);
+  const scored: Array<{ item: SlashItem; rank: number; distance: number; recent: boolean }> = [];
 
   for (const item of items) {
     // Score against name and description, keep best
@@ -67,10 +70,16 @@ export function searchSlashItems(
       .filter((s): s is FuzzyScore => s !== null)
       .sort((a, b) => a.rank - b.rank || a.distance - b.distance)[0];
 
-    if (best) scored.push({ item, rank: best.rank, distance: best.distance });
+    if (best) scored.push({ item, rank: best.rank, distance: best.distance, recent: recentSet.has(item.name) });
   }
 
-  scored.sort((a, b) => a.rank - b.rank || a.distance - b.distance || a.item.name.localeCompare(b.item.name));
+  // Within same rank+distance, recent items come first
+  scored.sort((a, b) =>
+    a.rank - b.rank
+    || a.distance - b.distance
+    || (a.recent === b.recent ? 0 : a.recent ? -1 : 1)
+    || a.item.name.localeCompare(b.item.name),
+  );
 
   return scored.slice(0, limit).map((s) => s.item);
 }

package/src/services/slash-discovery/index.ts

@@ -2,11 +2,13 @@ import { discoverSkillRoots } from "./discover-skill-roots.ts";
 import { loadItemsFromRoots } from "./skill-loader.ts";
 import { resolveOverrides } from "./resolve-overrides.ts";
 import { getBuiltinSlashItems } from "./builtin-commands.ts";
+import { getCached, setCache } from "./cache.ts";
 import type { SlashItem, SlashItemWithSource, DiscoveryResult } from "./types.ts";
 
 export { searchSlashItems } from "./fuzzy-search.ts";
 export { isPpmHandled, getBuiltinByName } from "./builtin-commands.ts";
 export { executeBuiltin } from "./builtin-handlers.ts";
+export { invalidateCache, invalidateAll } from "./cache.ts";
 export type { SlashItem, SlashItemWithSource, ShadowedItem, DiscoveryResult, SkillRoot, DefinitionSource } from "./types.ts";
 
 /**
@@ -34,9 +36,14 @@ export function listSlashItemsDetailed(projectPath: string): DiscoveryResult {
 
 /**
  * Backward-compatible: returns flat list of active items (no source metadata).
- * Same signature as the original `listSlashItems()`.
+ * Uses in-memory cache (5 min TTL) to avoid repeated filesystem scans.
  */
 export function listSlashItems(projectPath: string): SlashItem[] {
+  const cached = getCached(projectPath);
+  if (cached) return cached;
+
   const { active } = listSlashItemsDetailed(projectPath);
-  return active.map(({ source, rootPath, filePath, ...item }) => item);
+  const items = active.map(({ source, rootPath, filePath, ...item }) => item);
+  setCache(projectPath, items);
+  return items;
 }

package/src/services/slash-items.service.ts

@@ -2,5 +2,5 @@
  * Thin re-export wrapper — actual discovery logic lives in slash-discovery/.
  * Kept for backward compatibility with existing imports.
  */
-export { listSlashItems, searchSlashItems } from "./slash-discovery/index.ts";
+export { listSlashItems, searchSlashItems, invalidateCache } from "./slash-discovery/index.ts";
 export type { SlashItem } from "./slash-discovery/types.ts";

package/src/web/components/chat/chat-tab.tsx

@@ -38,6 +38,7 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
   const [slashFilter, setSlashFilter] = useState("");
   const [slashRanked, setSlashRanked] = useState(false);
   const [slashSelected, setSlashSelected] = useState<SlashItem | null>(null);
+  const [slashRecentNames, setSlashRecentNames] = useState<string[]>([]);
 
   // File picker state
   const [fileItems, setFileItems] = useState<FileNode[]>([]);
@@ -251,9 +252,10 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
 
   /** Stable callback for slash items loaded — prevents MessageInput memo break */
   const handleSlashItemsLoaded = useCallback(
-    (items: SlashItem[], ranked?: boolean) => {
+    (items: SlashItem[], ranked?: boolean, recentNames?: string[]) => {
       setSlashItems(items);
       if (ranked !== undefined) setSlashRanked(ranked);
+      if (recentNames) setSlashRecentNames(recentNames);
     },
     [],
   );
@@ -270,7 +272,13 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
     setShowSlashPicker(false);
     setSlashFilter("");
     setTimeout(() => setSlashSelected(null), 50);
-  }, []);
+    // Record usage for recents (fire-and-forget)
+    if (projectName) {
+      api.post(`${projectUrl(projectName)}/chat/slash-recents`, { name: item.name, type: item.type }).catch(() => {});
+      // Optimistic update: add to front of recents
+      setSlashRecentNames((prev) => [item.name, ...prev.filter((n) => n !== item.name)].slice(0, 5));
+    }
+  }, [projectName]);
 
   const handleSlashClose = useCallback(() => {
     setShowSlashPicker(false);
@@ -404,6 +412,8 @@ export function ChatTab({ metadata, tabId }: ChatTabProps) {
           onClose={handleSlashClose}
           visible={showSlashPicker}
           ranked={slashRanked}
+          recentNames={slashRecentNames}
+          projectName={projectName}
         />
         <FilePicker
           items={fileItems}

package/src/web/components/chat/message-input.tsx

@@ -32,7 +32,7 @@ interface MessageInputProps {
   projectName?: string;
   /** Slash picker state change */
   onSlashStateChange?: (visible: boolean, filter: string) => void;
-  onSlashItemsLoaded?: (items: SlashItem[], ranked?: boolean) => void;
+  onSlashItemsLoaded?: (items: SlashItem[], ranked?: boolean, recentNames?: string[]) => void;
   slashSelected?: SlashItem | null;
   /** File picker state change */
   onFileStateChange?: (visible: boolean, filter: string) => void;
@@ -95,6 +95,11 @@ export const MessageInput = memo(function MessageInput({
   // Track picker open state to avoid unnecessary parent callbacks per keystroke
   const slashPickerOpenRef = useRef(false);
   const filePickerOpenRef = useRef(false);
+  // CSS field-sizing: content handles auto-resize natively (Safari 18.2+, Chrome 123+).
+  // Only fall back to JS scrollHeight resize when unsupported.
+  const needsJsResize = useRef(
+    typeof CSS === "undefined" || !CSS.supports("field-sizing", "content"),
+  );
 
   /** Write value to both textareas + ref + update hasText state */
   const writeTextareas = useCallback((newValue: string) => {
@@ -119,14 +124,16 @@ export const MessageInput = memo(function MessageInput({
     const prefix = preVoiceTextRef.current;
     const newValue = prefix ? prefix + " " + text : text;
     writeTextareas(newValue);
-    // Auto-resize textarea
-    requestAnimationFrame(() => {
-      const ta = getVisibleTextarea();
-      if (ta) {
-        ta.style.height = "auto";
-        ta.style.height = Math.min(ta.scrollHeight, 160) + "px";
-      }
-    });
+    // Auto-resize textarea (only when CSS field-sizing is unsupported)
+    if (needsJsResize.current) {
+      requestAnimationFrame(() => {
+        const ta = getVisibleTextarea();
+        if (ta) {
+          ta.style.height = "auto";
+          ta.style.height = Math.min(ta.scrollHeight, 160) + "px";
+        }
+      });
+    }
   }, [writeTextareas, getVisibleTextarea]);
   const handleVoiceToggle = useCallback(() => {
     if (voice.isListening) {
@@ -162,25 +169,35 @@ export const MessageInput = memo(function MessageInput({
     setTimeout(() => { getVisibleTextarea()?.focus(); }, 100);
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Fetch slash items when projectName changes
-  useEffect(() => {
+  // Fetch slash items from server
+  const fetchSlashItems = useCallback(() => {
     if (!projectName) {
       slashItemsRef.current = [];
-      onSlashItemsLoaded?.([], false);
+      onSlashItemsLoaded?.([], false, []);
       return;
     }
     api
-      .get<SlashItem[]>(`${projectUrl(projectName)}/chat/slash-items`)
-      .then((items) => {
-        slashItemsRef.current = items;
+      .get<{ items: SlashItem[]; recentNames: string[] }>(`${projectUrl(projectName)}/chat/slash-items`)
+      .then((data) => {
+        slashItemsRef.current = data.items;
         slashRankedRef.current = false;
-        onSlashItemsLoaded?.(items, false);
+        onSlashItemsLoaded?.(data.items, false, data.recentNames);
       })
       .catch(() => {
         slashItemsRef.current = [];
-        onSlashItemsLoaded?.([], false);
+        onSlashItemsLoaded?.([], false, []);
       });
-  }, [projectName]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [projectName, onSlashItemsLoaded]);
+
+  // Fetch slash items when projectName changes
+  useEffect(() => { fetchSlashItems(); }, [fetchSlashItems]);
+
+  // Re-fetch when cache is invalidated via refresh button
+  useEffect(() => {
+    const handler = () => fetchSlashItems();
+    window.addEventListener("ppm:slash-items-refresh", handler);
+    return () => window.removeEventListener("ppm:slash-items-refresh", handler);
+  }, [fetchSlashItems]);
 
   // Cleanup debounce timer on unmount
   useEffect(() => {
@@ -375,8 +392,10 @@ export const MessageInput = memo(function MessageInput({
     setAttachments([]);
     setPendingSend(false);
     setPriority('next');
-    if (textareaRef.current) textareaRef.current.style.height = "auto";
-    if (mobileTextareaRef.current) mobileTextareaRef.current.style.height = "auto";
+    if (needsJsResize.current) {
+      if (textareaRef.current) textareaRef.current.style.height = "auto";
+      if (mobileTextareaRef.current) mobileTextareaRef.current.style.height = "auto";
+    }
   }, [attachments, onSend, onSlashStateChange, onFileStateChange, isStreaming, priority, writeTextareas]);
 
   const handleSend = useCallback(() => {
@@ -428,12 +447,12 @@ export const MessageInput = memo(function MessageInput({
       const requestId = ++slashSearchIdRef.current;
       slashDebounceRef.current = setTimeout(() => {
         api
-          .get<SlashItem[]>(`${projectUrl(projectName)}/chat/slash-items?q=${encodeURIComponent(query)}`)
-          .then((items) => {
+          .get<{ items: SlashItem[]; recentNames: string[] }>(`${projectUrl(projectName)}/chat/slash-items?q=${encodeURIComponent(query)}`)
+          .then((data) => {
             if (requestId !== slashSearchIdRef.current) return; // stale response
-            slashItemsRef.current = items;
+            slashItemsRef.current = data.items;
             slashRankedRef.current = true;
-            onSlashItemsLoaded?.(items, true);
+            onSlashItemsLoaded?.(data.items, true, data.recentNames);
           })
           .catch(() => {
             if (requestId !== slashSearchIdRef.current) return;
@@ -509,13 +528,15 @@ export const MessageInput = memo(function MessageInput({
       setHasText(text.trim().length > 0);
       // Update picker state (slash/file autocomplete)
       updatePickerState(text, el.selectionStart);
-      // rAF-debounced resize
-      if (resizeRafRef.current) cancelAnimationFrame(resizeRafRef.current);
-      resizeRafRef.current = requestAnimationFrame(() => {
-        resizeRafRef.current = 0;
-        el.style.height = "auto";
-        el.style.height = Math.min(el.scrollHeight, el === mobileTextareaRef.current ? 80 : 160) + "px";
-      });
+      // JS auto-resize fallback — only when CSS field-sizing: content is unsupported
+      if (needsJsResize.current) {
+        if (resizeRafRef.current) cancelAnimationFrame(resizeRafRef.current);
+        resizeRafRef.current = requestAnimationFrame(() => {
+          resizeRafRef.current = 0;
+          el.style.height = "auto";
+          el.style.height = Math.min(el.scrollHeight, el === mobileTextareaRef.current ? 80 : 160) + "px";
+        });
+      }
     },
     [updatePickerState],
   );
@@ -630,7 +651,7 @@ export const MessageInput = memo(function MessageInput({
             placeholder={isStreaming ? "Follow-up..." : "Ask anything..."}
             disabled={disabled}
             rows={1}
-            className="flex-1 resize-none bg-transparent py-1.5 text-sm text-foreground placeholder:text-text-subtle focus:outline-none disabled:opacity-50 max-h-20"
+            className="flex-1 resize-none bg-transparent py-1.5 text-sm text-foreground placeholder:text-text-subtle focus:outline-none disabled:opacity-50 max-h-20 [field-sizing:content]"
           />
           {voice.supported && (
             <button
@@ -680,7 +701,7 @@ export const MessageInput = memo(function MessageInput({
             placeholder={isStreaming ? "Follow-up or Stop..." : "Ask anything..."}
             disabled={disabled}
             rows={1}
-            className="w-full resize-none bg-transparent px-4 pt-3 pb-1 text-sm text-foreground placeholder:text-text-subtle focus:outline-none disabled:opacity-50 max-h-40"
+            className="w-full resize-none bg-transparent px-4 pt-3 pb-1 text-sm text-foreground placeholder:text-text-subtle focus:outline-none disabled:opacity-50 max-h-40 [field-sizing:content]"
           />
           <div className="flex items-center justify-between px-3 pb-2">
             <div className="flex items-center gap-1">

package/src/web/components/chat/message-list.tsx

@@ -117,7 +117,7 @@ export function MessageList({
 
   return (
     <div className="relative flex-1 overflow-hidden flex flex-col min-h-0">
-      <StickToBottom className="flex-1 overflow-y-auto overflow-x-hidden" resize="smooth" initial="instant">
+      <StickToBottom className="flex-1 overflow-y-auto overflow-x-hidden [contain:strict]" resize="smooth" initial="instant">
         <StickToBottom.Content className="p-4 space-y-4 select-none">
           {hasMore && (
             <button onClick={() => setVisibleCount((c) => c + PAGE_SIZE)}
@@ -807,21 +807,14 @@ function ThinkingBlock({ content, isStreaming }: { content: string; isStreaming:
  * When `isStreaming=true`, shows a blinking cursor at the end.
  */
 function StreamingText({ content, animate: isStreaming, projectName }: { content: string; animate: boolean; projectName?: string }) {
-  // During active streaming, render plain text to avoid running 6 heavy markdown
-  // plugins (remarkGfm, remarkMath, remarkBreaks, rehypeRaw, rehypeKatex, rehypeHighlight)
-  // on every rAF frame. Full markdown renders once streaming ends.
-  if (isStreaming) {
-    const cleaned = stripTeammateMessages(content);
-    return (
-      <>
-        {cleaned && (
-          <div className="prose prose-invert max-w-none whitespace-pre-wrap break-words select-text">{cleaned}</div>
-        )}
+  return (
+    <>
+      <MarkdownContent content={content} projectName={projectName} isStreaming={isStreaming} />
+      {isStreaming && (
         <span className="text-text-subtle text-sm animate-pulse">Thinking...</span>
-      </>
-    );
-  }
-  return <MarkdownContent content={content} projectName={projectName} />;
+      )}
+    </>
+  );
 }
 
 /**

package/src/web/components/chat/slash-command-picker.tsx

@@ -1,5 +1,6 @@
-import { useState, useEffect, useRef, useCallback, type KeyboardEvent } from "react";
-import { Sparkles, Terminal, Zap } from "lucide-react";
+import { useState, useEffect, useRef, useCallback, useMemo, type KeyboardEvent } from "react";
+import { Sparkles, Terminal, Zap, RefreshCw, Clock } from "lucide-react";
+import { api, projectUrl } from "@/lib/api-client";
 
 export interface SlashItem {
   type: "skill" | "command" | "builtin";
@@ -19,6 +20,10 @@ interface SlashCommandPickerProps {
   visible: boolean;
   /** When true, items are pre-ranked by server — skip client-side filtering */
   ranked?: boolean;
+  /** Recently used item names (most recent first) */
+  recentNames?: string[];
+  /** Project name for cache invalidation */
+  projectName?: string;
 }
 
 export function SlashCommandPicker({
@@ -28,19 +33,46 @@ export function SlashCommandPicker({
   onClose,
   visible,
   ranked,
+  recentNames = [],
+  projectName,
 }: SlashCommandPickerProps) {
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const [refreshing, setRefreshing] = useState(false);
   const listRef = useRef<HTMLDivElement>(null);
 
-  const filtered = ranked
-    ? items
-    : items.filter((item) => {
-        const q = filter.toLowerCase();
-        return (
-          item.name.toLowerCase().includes(q) ||
-          item.description.toLowerCase().includes(q)
-        );
-      });
+  const recentSet = useMemo(() => new Set(recentNames), [recentNames]);
+
+  // Build display list: when no filter + not ranked, put recents first
+  const displayItems = useMemo(() => {
+    let base: SlashItem[];
+    if (ranked) {
+      base = items;
+    } else if (filter) {
+      const q = filter.toLowerCase();
+      base = items.filter(
+        (item) => item.name.toLowerCase().includes(q) || item.description.toLowerCase().includes(q),
+      );
+    } else {
+      base = items;
+    }
+
+    // Reorder: recents first when no filter and not server-ranked
+    if (!filter && !ranked && recentNames.length > 0) {
+      const recents: SlashItem[] = [];
+      const rest: SlashItem[] = [];
+      for (const item of base) {
+        if (recentSet.has(item.name)) recents.push(item);
+        else rest.push(item);
+      }
+      // Sort recents by their order in recentNames (most recent first)
+      recents.sort((a, b) => recentNames.indexOf(a.name) - recentNames.indexOf(b.name));
+      return { items: [...recents, ...rest], recentCount: recents.length };
+    }
+    return { items: base, recentCount: 0 };
+  }, [items, filter, ranked, recentNames, recentSet]);
+
+  const filtered = displayItems.items;
+  const recentCount = displayItems.recentCount;
 
   // Reset selection when filter changes
   useEffect(() => {
@@ -95,49 +127,91 @@ export function SlashCommandPicker({
     return () => document.removeEventListener("keydown", handler, true);
   }, [visible, handleKeyDown]);
 
+  const handleRefresh = useCallback(() => {
+    if (!projectName || refreshing) return;
+    setRefreshing(true);
+    api.del(`${projectUrl(projectName)}/chat/slash-items/cache`)
+      .then(() => {
+        // Trigger re-fetch by dispatching custom event (MessageInput listens on projectName)
+        window.dispatchEvent(new CustomEvent("ppm:slash-items-refresh"));
+      })
+      .finally(() => setRefreshing(false));
+  }, [projectName, refreshing]);
+
   if (!visible || filtered.length === 0) return null;
 
   return (
     <div className="max-h-52 overflow-y-auto border-b border-border bg-surface">
       <div ref={listRef} className="py-1">
-        {filtered.map((item, i) => (
-          <button
-            key={`${item.type}-${item.name}`}
-            className={`flex items-start gap-3 w-full px-3 py-2 text-left transition-colors ${
-              i === selectedIndex
-                ? "bg-primary/10 text-primary"
-                : "hover:bg-surface-hover text-text-primary"
-            }`}
-            onMouseEnter={() => setSelectedIndex(i)}
-            onClick={() => onSelect(item)}
-          >
-            <span className="shrink-0 mt-0.5">
-              {item.type === "builtin" ? (
-                <Zap className="size-4 text-emerald-500" />
-              ) : item.type === "skill" ? (
-                <Sparkles className="size-4 text-amber-500" />
-              ) : (
-                <Terminal className="size-4 text-blue-500" />
+        {filtered.map((item, i) => {
+          // Show "Recent" separator before first item, "All" before first non-recent
+          const showRecentLabel = recentCount > 0 && i === 0;
+          const showAllLabel = recentCount > 0 && i === recentCount;
+
+          return (
+            <div key={`${item.type}-${item.name}`}>
+              {showRecentLabel && (
+                <div className="flex items-center justify-between px-3 pt-1 pb-0.5">
+                  <span className="text-[10px] font-medium text-text-subtle uppercase tracking-wider flex items-center gap-1">
+                    <Clock className="size-3" />
+                    Recent
+                  </span>
+                  {projectName && (
+                    <button
+                      type="button"
+                      onClick={(e) => { e.stopPropagation(); handleRefresh(); }}
+                      className="text-text-subtle hover:text-text-primary transition-colors p-0.5 rounded"
+                      title="Refresh skill list"
+                      aria-label="Refresh skill list"
+                    >
+                      <RefreshCw className={`size-3 ${refreshing ? "animate-spin" : ""}`} />
+                    </button>
+                  )}
+                </div>
               )}
-            </span>
-            <div className="min-w-0 flex-1">
-              <div className="flex items-baseline gap-2">
-                <span className="font-medium text-sm">/{item.name}</span>
-                {item.argumentHint && (
-                  <span className="text-xs text-text-subtle">{item.argumentHint}</span>
-                )}
-                <span className="text-xs text-text-subtle capitalize ml-auto">
-                  {item.scope === "bundled" ? "PPM" : item.scope === "user" ? "global" : item.type}
-                </span>
-              </div>
-              {item.description && (
-                <p className="text-xs text-text-subtle mt-0.5 line-clamp-2">
-                  {item.description}
-                </p>
+              {showAllLabel && (
+                <div className="px-3 pt-1.5 pb-0.5">
+                  <span className="text-[10px] font-medium text-text-subtle uppercase tracking-wider">All</span>
+                </div>
               )}
+              <button
+                className={`flex items-start gap-3 w-full px-3 py-2 text-left transition-colors ${
+                  i === selectedIndex
+                    ? "bg-primary/10 text-primary"
+                    : "hover:bg-surface-hover text-text-primary"
+                }`}
+                onMouseEnter={() => setSelectedIndex(i)}
+                onClick={() => onSelect(item)}
+              >
+                <span className="shrink-0 mt-0.5">
+                  {item.type === "builtin" ? (
+                    <Zap className="size-4 text-emerald-500" />
+                  ) : item.type === "skill" ? (
+                    <Sparkles className="size-4 text-amber-500" />
+                  ) : (
+                    <Terminal className="size-4 text-blue-500" />
+                  )}
+                </span>
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-baseline gap-2">
+                    <span className="font-medium text-sm">/{item.name}</span>
+                    {item.argumentHint && (
+                      <span className="text-xs text-text-subtle">{item.argumentHint}</span>
+                    )}
+                    <span className="text-xs text-text-subtle capitalize ml-auto">
+                      {item.scope === "bundled" ? "PPM" : item.scope === "user" ? "global" : item.type}
+                    </span>
+                  </div>
+                  {item.description && (
+                    <p className="text-xs text-text-subtle mt-0.5 line-clamp-2">
+                      {item.description}
+                    </p>
+                  )}
+                </div>
+              </button>
             </div>
-          </button>
-        ))}
+          );
+        })}
       </div>
     </div>
   );