feat: implement comments and activity panel in workspace

- Added CommentsPanel component for managing comments on documents.
- Integrated comment creation, deletion, and resolution functionalities.
- Implemented activity tracking for document interactions.
- Enhanced SketchPage with editing and saving capabilities.
- Introduced template management API endpoints for creating, sharing, and deleting templates.
- Added runtime validation report for frontend and backend.
- Created GettingStartedPanel for user onboarding with template options.
- Implemented Playwright E2E tests for accessibility and export functionality.

frontend/src/index.css

@@ -30,6 +30,22 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
+.page-menu-item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.625rem;
+  border-radius: 0.5rem;
+  padding: 0.5rem 0.625rem;
+  text-align: left;
+  font-size: 0.875rem;
+  color: var(--color-silos-text);
+}
+
+.page-menu-item:hover {
+  background: var(--color-silos-cream);
+}
+
 @keyframes workflow-pulse {
   0%, 100% { transform: scale(1); opacity: 1; }
   50% { transform: scale(1.08); opacity: 0.85; }
@@ -48,3 +64,97 @@ body {
   stroke-dasharray: 8 4;
   animation: workflow-flow 1.5s linear infinite;
 }
+
+.prose .silos-table {
+  width: 100%;
+  margin: 1rem 0;
+  border-collapse: collapse;
+  overflow: hidden;
+  border: 1px solid var(--color-silos-cream-dark);
+  border-radius: 0.75rem;
+}
+
+.prose .silos-table th,
+.prose .silos-table td {
+  min-width: 8rem;
+  border: 1px solid var(--color-silos-cream-dark);
+  padding: 0.65rem 0.75rem;
+  text-align: left;
+}
+
+.prose .silos-table th {
+  background: var(--color-silos-cream);
+  font-weight: 600;
+}
+
+.prose .silos-panel {
+  margin: 1rem 0;
+  border-left: 4px solid var(--color-silos-tan);
+  border-radius: 0.5rem;
+  background: var(--color-silos-cream);
+  padding: 0.85rem 1rem;
+}
+
+.prose .silos-media {
+  margin: 1rem 0;
+  border-radius: 0.75rem;
+  background: var(--color-silos-cream);
+  padding: 0.75rem;
+}
+
+.prose .silos-media img {
+  max-height: 32rem;
+  max-width: 100%;
+  border-radius: 0.5rem;
+  object-fit: contain;
+}
+
+.prose .silos-media figcaption {
+  margin-top: 0.45rem;
+  color: var(--color-silos-muted);
+  font-size: 0.8rem;
+}
+
+.prose .silos-embed {
+  margin-top: 0.65rem;
+  overflow-wrap: anywhere;
+  color: var(--color-silos-muted);
+  font-size: 0.85rem;
+}
+
+.prose .silos-mention {
+  border-radius: 0.25rem;
+  background: #deebff;
+  color: #0747a6;
+  padding: 0.1rem 0.3rem;
+}
+
+.prose .silos-tabs {
+  margin: 1rem 0;
+  border: 1px solid var(--color-silos-cream-dark);
+  border-radius: 0.75rem;
+  padding: 0.75rem;
+}
+
+.prose .silos-tab-list {
+  display: flex;
+  gap: 0.45rem;
+  border-bottom: 1px solid var(--color-silos-cream-dark);
+  padding-bottom: 0.6rem;
+}
+
+.prose .silos-tab-list span {
+  border-radius: 0.5rem;
+  padding: 0.3rem 0.65rem;
+  color: var(--color-silos-muted);
+  font-size: 0.8rem;
+}
+
+.prose .silos-tab-list .silos-tab-active {
+  background: var(--color-silos-brown);
+  color: white;
+}
+
+.prose .silos-tab-content {
+  padding: 0.85rem 0.25rem 0.25rem;
+}