frontend: clinical UI fixes + chat/composer polish

- chat composer: attach works with text (sr-only file input); lighter
  bordered input box
- messages: defer "+" menu actions past close so file/appointment pickers fire
- tasks: top-level New task button
- chat: condensed appointment card with "View in calendar" deep-link;
  appointments page auto-opens the month calendar from ?calendar=&date=
- lab: work-queue rows expand to show task detail + complete
- inventory: clickable item detail dialog
- pharmacy: Dispense action records a dispense + "Recently dispensed" feed;
  expiring badge uses endDate and only flags <=2 days left
- prescriptions: keyboard nav in patient search, inventory-backed medication
  combobox (free-text fallback), optional start/end dates; thread dates through
- sidebar: whole nav scrolls as one
- i18n keys for all new strings

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/components/chat/chat-input.tsx

@@ -106,10 +106,10 @@ export function ChatInput({
         event.preventDefault();
         submit();
       }}
-      className="w-full shrink-0 overflow-hidden rounded-[28px] border border-border bg-input shadow-sm"
+      className="w-full shrink-0 overflow-hidden rounded-[28px] border border-input bg-background shadow-sm transition-shadow focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/24 dark:bg-input/30"
     >
       {/* Textarea + toolbar, filling the rounded card. */}
-      <div className="bg-input">
+      <div>
         <textarea
           aria-label={t("chat.input.message")}
           className="field-sizing-content block max-h-48 min-h-16 w-full resize-none bg-transparent px-5 pt-5 pb-2 text-base text-foreground outline-none placeholder:text-muted-foreground"
@@ -141,12 +141,16 @@ export function ChatInput({
           </div>
         )}
 
+        {/* Visually hidden (not `display:none`) so programmatic `.click()` from
+            the attach button works reliably across browsers — a `display:none`
+            file input can refuse to open the picker. */}
         <input
           aria-label={t("chat.input.attachFiles")}
-          className="hidden"
+          className="sr-only"
           multiple
           onChange={handleFilesSelected}
           ref={fileInputRef}
+          tabIndex={-1}
           type="file"
         />
 

frontend/components/chat/record-list-card.tsx

@@ -1,10 +1,12 @@
 "use client";
 
-import { CalendarClock, ClipboardList, Pill } from "lucide-react";
+import { CalendarClock, ChevronRight, ClipboardList, Pill } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
+import Link from "next/link";
 import { useTranslation } from "react-i18next";
 
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import type { Appointment } from "@/lib/appointments";
 import { formatPrescribedAt, type Prescription } from "@/lib/prescriptions";
@@ -64,20 +66,101 @@ function Shell({
   );
 }
 
-export function AppointmentListCard({ appointments }: { appointments: Appointment[] }) {
+// "2026-06-16" -> "Jun 16" (compact, for the date-range summary).
+function shortDate(iso: string): string {
+  return new Date(`${iso}T00:00:00`).toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+  });
+}
+
+// Appointments are rendered condensed: rather than one dense card per row (which
+// floods the chat for a week's schedule), show a small summary + a few previews
+// and send the clinician to the Appointments calendar for the full picture.
+const APPT_PREVIEW = 3;
+
+export function AppointmentListCard({
+  appointments,
+}: {
+  appointments: Appointment[];
+}) {
   const { t } = useTranslation();
-  const rows: Row[] = appointments.map((a) => ({
-    primary: a.name,
-    secondary: [a.date, a.time, a.type, a.provider].filter(Boolean).join(" · "),
-    badge: a.status,
-  }));
+
+  if (appointments.length === 0) {
+    return (
+      <Shell
+        emptyKey="chat.lists.noAppointments"
+        icon={CalendarClock}
+        rows={[]}
+        title={t("chat.lists.appointments")}
+      />
+    );
+  }
+
+  const dates = appointments.map((a) => a.date).filter(Boolean).sort();
+  const first = dates[0];
+  const last = dates[dates.length - 1];
+  const range = first
+    ? first === last
+      ? shortDate(first)
+      : `${shortDate(first)} – ${shortDate(last as string)}`
+    : "";
+  // Deep-link to the Appointments calendar, opened on the first appointment's
+  // month (the page reads `?calendar=1&date=`).
+  const href = first
+    ? `/appointments?calendar=1&date=${first}`
+    : "/appointments?calendar=1";
+  const preview = appointments.slice(0, APPT_PREVIEW);
+  const remaining = appointments.length - preview.length;
+
   return (
-    <Shell
-      emptyKey="chat.lists.noAppointments"
-      icon={CalendarClock}
-      rows={rows}
-      title={t("chat.lists.appointments")}
-    />
+    <Card className="w-full gap-0 overflow-hidden p-0">
+      <div className="flex items-center gap-2 border-b px-4 py-3">
+        <CalendarClock className="size-4 text-muted-foreground" />
+        <span className="font-medium text-sm">
+          {t("chat.lists.appointments")}
+        </span>
+        {range ? (
+          <span className="text-muted-foreground text-xs">{range}</span>
+        ) : null}
+        <Badge className="ml-auto" variant="secondary">
+          {appointments.length}
+        </Badge>
+      </div>
+      <div className="divide-y divide-border">
+        {preview.map((a, i) => (
+          <div className="flex items-center gap-3 px-4 py-2.5" key={a.id ?? i}>
+            <span className="w-12 shrink-0 text-muted-foreground text-xs tabular-nums">
+              {a.time}
+            </span>
+            <div className="flex min-w-0 flex-1 flex-col">
+              <span className="truncate font-medium text-foreground text-sm">
+                {a.name}
+              </span>
+              <span className="truncate text-muted-foreground text-xs">
+                {[shortDate(a.date), a.type, a.provider]
+                  .filter(Boolean)
+                  .join(" · ")}
+              </span>
+            </div>
+            <Badge className="shrink-0" variant="outline">
+              {a.status}
+            </Badge>
+          </div>
+        ))}
+      </div>
+      <div className="flex items-center justify-between gap-2 border-t px-3 py-2">
+        <span className="text-muted-foreground text-xs">
+          {remaining > 0
+            ? t("chat.lists.moreAppointments", { count: remaining })
+            : ""}
+        </span>
+        <Button render={<Link href={href} />} size="sm" variant="ghost">
+          {t("chat.lists.viewInCalendar")}
+          <ChevronRight className="size-4" />
+        </Button>
+      </div>
+    </Card>
   );
 }