+
+ Add Related Resource
+
+
+
+ No documents found matching "{inputValue}"
+
+ )}
+
+ {error && (
+
+ );
+};
+
+export default AddResourceForm;
\ No newline at end of file
diff --git a/hermes-plugin/src/taskpane/components/App.tsx b/hermes-plugin/src/taskpane/components/App.tsx
new file mode 100644
index 000000000..b9c99cee7
--- /dev/null
+++ b/hermes-plugin/src/taskpane/components/App.tsx
@@ -0,0 +1,647 @@
+import * as React from "react";
+import { makeStyles, ProgressBar, Button, Text, FluentProvider, webDarkTheme, webLightTheme } from "@fluentui/react-components";
+import Sidebar from "./Sidebar";
+import WordPluginController, { DocumentManageStatus } from "../utils/wordPluginController";
+import DarkTheme from "../utils/darkTheme";
+import LightTheme from "../utils/lightTheme";
+import { ThemeProvider, useTheme } from "../utils/themeContext";
+import { authenticateWithPopup, checkAuthStatus, grantStorageAccess, initializeStorageAccess } from "../utils/authPopup";
+import { HERMES_AUTH_REQUIRED_EVENT } from "../utils/hermesClient";
+
+interface AppProps {
+ controller: WordPluginController;
+}
+
+const useStyles = makeStyles({
+ root: {
+ minHeight: "100vh",
+ backgroundColor: DarkTheme.background.primary,
+ color: DarkTheme.text.primary,
+ },
+
+ loadingDiv: {
+ display: "flex",
+ justifyItems: "center",
+ alignContent: "center",
+ alignItems: "center",
+ paddingTop: "40vh",
+ backgroundColor: DarkTheme.background.primary,
+ },
+
+ authContainer: {
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ padding: "32px 16px",
+ textAlign: "center",
+ gap: "16px",
+ backgroundColor: DarkTheme.background.primary,
+ minHeight: "100vh",
+ },
+
+ authTitle: {
+ fontSize: "18px",
+ fontWeight: "bold",
+ color: DarkTheme.text.primary,
+ },
+
+ authDescription: {
+ fontSize: "14px",
+ color: DarkTheme.text.secondary,
+ lineHeight: "1.4",
+ },
+
+ retryContainer: {
+ display: "flex",
+ alignItems: "center",
+ gap: "8px",
+ marginTop: "8px",
+ },
+
+ notManagedContainer: {
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ padding: "32px 16px",
+ textAlign: "center",
+ gap: "16px",
+ backgroundColor: DarkTheme.background.primary,
+ minHeight: "100vh",
+ },
+
+ notManagedIcon: {
+ fontSize: "48px",
+ color: DarkTheme.text.tertiary,
+ marginBottom: "8px",
+ },
+
+ notManagedTitle: {
+ fontSize: "20px",
+ fontWeight: "bold",
+ color: DarkTheme.text.primary,
+ margin: "0",
+ },
+
+ notManagedDescription: {
+ fontSize: "14px",
+ color: DarkTheme.text.secondary,
+ lineHeight: "1.5",
+ maxWidth: "300px",
+ },
+
+ notManagedActions: {
+ display: "flex",
+ flexDirection: "column",
+ gap: "12px",
+ marginTop: "16px",
+ },
+});
+
+enum DocFetchStatus {
+ Loading,
+ NotManaged,
+ Managed,
+ InternalError,
+}
+
+const AppCore: React.FC
+
+ handleInputChange(data.value)}
+ placeholder="Type document name or paste URL..."
+ disabled={isSubmitting}
+ size="small"
+ className={styles.inputField}
+ />
+
+
+
+ {showUrlNameInput && (
+
+
+ setUrlName(data.value)}
+ placeholder="Name for this resource"
+ disabled={isSubmitting}
+ size="small"
+ className={styles.inputField}
+ />
+
+
+ )}
+
+ {isSearching && !isUrl && (
+
+ }
+ onClick={onCancel}
+ disabled={isSubmitting}
+ size="small"
+ onMouseEnter={() => setIsCancelHovered(true)}
+ onMouseLeave={() => setIsCancelHovered(false)}
+ style={{
+ backgroundColor: isCancelHovered ? theme.background.tertiary : "transparent",
+ color: isCancelHovered ? theme.text.primary : theme.text.secondary,
+ border: `1px solid ${isCancelHovered ? theme.border.secondary : theme.border.primary}`,
+ }}
+ >
+ Cancel
+
+ }
+ onClick={handleUrlSubmit}
+ disabled={isSubmitting}
+ size="small"
+ >
+ {isSubmitting ? "Adding..." : "Add URL"}
+
+
+
+
+ )}
+
+ {searchResults.length > 0 && !isUrl && (
+
+ {searchResults.map((doc) => (
+
+ )}
+
+ {inputValue.length >= 2 && !isSearching && searchResults.length === 0 && !isUrl && (
+ handleDocumentClick(doc)}
+ style={{ cursor: isSubmitting ? 'not-allowed' : 'pointer' }}
+ >
+
+ ))}
+
+
+ {doc.title}
+
+
+ {doc.docType} · {doc.docNumber} · {doc.owners && doc.owners.length > 0 ? getOwnerDisplayName(doc.owners[0]) : 'Unknown Owner'}
+
+
+
+
+ {error}
+
+
+ )}
+
+ {!showUrlNameInput && (
+
+ }
+ onClick={onCancel}
+ disabled={isSubmitting}
+ size="small"
+ onMouseEnter={() => setIsCancelHovered(true)}
+ onMouseLeave={() => setIsCancelHovered(false)}
+ style={{
+ backgroundColor: isCancelHovered ? theme.background.tertiary : "transparent",
+ color: isCancelHovered ? theme.text.primary : theme.text.secondary,
+ border: `1px solid ${isCancelHovered ? theme.border.secondary : theme.border.primary}`,
+ }}
+ >
+ Cancel
+
+
+ )}
+
+
+ );
+ }
+
+ switch (docStatus) {
+ case DocumentManageStatus.Loading:
+ return (
+
+
+ );
+ case DocumentManageStatus.Managed:
+ return Something went wrong
; + case DocumentManageStatus.NotManaged: + return ( +
+
+ Document Not Managed
+
+
+ This document is not managed by Hermes. To enable document
+ management features like metadata tracking, approvals, and collaboration,
+ please create document through Hermes.
+
+
+ );
+ case DocumentManageStatus.AuthenticationRequired:
+ return (
+ 📄
+
+
+
+
+ Authentication Required
+
+ {!popupAuthComplete ? (
+ // Step 1: Sign In
+ <>
+
+ You need to sign in to Hermes to manage this document.
+ A secure popup window will open for authentication.
+
+
+ {isAuthenticating && (
+
+ ✓ Sign-in complete! Now click below to allow cookie access.
+ This is required for the add-in to access your session.
+
+
+ {isGrantingAccess && (
+
+ {authError}
+
+ )}
+
+ );
+ default:
+ return (
+
+
+ Please complete sign-in in the popup window, then close it...
+
+
+ )}
+
+ ) : (
+ // Step 2: Grant Storage Access
+ <>
+
+
+ Verifying access...
+
+
+ )}
+
+ )}
+
+ {authError && (
+
+
+ );
+ }
+ };
+
+ // The list items are static and won't change at runtime,
+ // so this should be an ordinary const, not a part of state.
+
+ return (
+
+ {renderBody()}
+
+ );
+};
+
+/**
+ * App is the top-level component that provides the ThemeContext and FluentProvider.
+ * AppCore handles all business logic and rendering.
+ */
+const App: React.FC
+ {/* Base document image */}
+ 
{
+ // Fallback if image doesn't load
+ const target = e.target as HTMLImageElement;
+ target.style.display = "none";
+ target.parentElement!.style.backgroundColor = theme.background.tertiary;
+ target.parentElement!.innerHTML += `
+ );
+};
+
+export default DocumentThumbnail;
\ No newline at end of file
diff --git a/hermes-plugin/src/taskpane/components/EditRelatedResourceModal.tsx b/hermes-plugin/src/taskpane/components/EditRelatedResourceModal.tsx
new file mode 100644
index 000000000..8c535d756
--- /dev/null
+++ b/hermes-plugin/src/taskpane/components/EditRelatedResourceModal.tsx
@@ -0,0 +1,252 @@
+import * as React from "react";
+import {
+ makeStyles,
+ Button,
+ Input,
+ Dialog,
+ DialogSurface,
+ DialogTitle,
+ DialogContent,
+ DialogActions,
+ DialogBody,
+ Field,
+} from "@fluentui/react-components";
+import { Delete24Regular } from "@fluentui/react-icons";
+import { RelatedExternalLink } from "../interfaces/relatedResources";
+import DarkTheme, { commonStyles } from "../utils/darkTheme";
+import LightTheme from "../utils/lightTheme";
+import { useTheme } from "../utils/themeContext";
+
+const useStyles = makeStyles({
+ dialogContent: {
+ display: "flex",
+ flexDirection: "column",
+ gap: "16px",
+ minWidth: "400px",
+ backgroundColor: DarkTheme.background.elevated,
+ color: DarkTheme.text.primary,
+ },
+
+ urlPreview: {
+ fontSize: "12px",
+ color: DarkTheme.text.tertiary,
+ fontStyle: "italic",
+ wordBreak: "break-all",
+ },
+
+ errorText: {
+ fontSize: "12px",
+ },
+
+ deleteSection: {
+ borderTop: `1px solid ${DarkTheme.border.primary}`,
+ paddingTop: "16px",
+ marginTop: "8px",
+ },
+
+ deleteButton: {
+ color: `${DarkTheme.interactive.danger} !important`,
+ backgroundColor: "transparent !important",
+ border: `1px solid ${DarkTheme.interactive.danger} !important`,
+ borderRadius: "4px !important",
+ fontWeight: "500 !important",
+ },
+
+ deleteText: {
+ fontSize: "14px",
+ color: DarkTheme.text.secondary,
+ marginBottom: "12px",
+ },
+
+ fieldLabel: {
+ "& label": {
+ ...commonStyles.fieldLabel,
+ },
+ },
+
+ inputField: commonStyles.inputField,
+ primaryButton: commonStyles.primaryButton,
+});
+
+interface EditRelatedResourceModalProps {
+ isOpen: boolean;
+ resource: RelatedExternalLink;
+ onClose: () => void;
+ onSave: (resource: RelatedExternalLink) => Promise {
+ // Fallback if image doesn't load
+ const target = e.target as HTMLImageElement;
+ target.style.display = "none";
+ target.parentElement!.style.backgroundColor = theme.background.tertiary;
+ target.parentElement!.innerHTML += `📄
`;
+ }}
+ />
+
+ {/* Overlay for badges and status */}
+
+ {/* Status icon */}
+ {(isApproved || isObsolete) && (
+
+
+ {isApproved ? "✓" : "🗃"}
+
+ )}
+
+ {/* Product badge */}
+ {product && (
+
+
+ )}
+
+
+ Edit Resource
+
+
+
+ Preview: {name.trim() || new URL(url).hostname.replace(/^www\./, "")}
+
+ )}
+
+ {saveError && (
+
+ );
+};
+
+export default EditResourceForm;
\ No newline at end of file
diff --git a/hermes-plugin/src/taskpane/components/EditableText.tsx b/hermes-plugin/src/taskpane/components/EditableText.tsx
new file mode 100644
index 000000000..91e59206a
--- /dev/null
+++ b/hermes-plugin/src/taskpane/components/EditableText.tsx
@@ -0,0 +1,272 @@
+import { Text, Input, Button, Textarea, makeStyles, mergeClasses } from "@fluentui/react-components";
+import { Checkmark24Regular, Dismiss24Regular, Edit16Regular } from "@fluentui/react-icons";
+import * as React from "react";
+import DarkTheme from "../utils/darkTheme";
+import LightTheme from "../utils/lightTheme";
+import { useTheme } from "../utils/themeContext";
+
+type EditableTitleProps = {
+ label?: string;
+ text: string;
+ size?: 400 | 100 | 200 | 300 | 500 | 600 | 700 | 800 | 900 | 1000;
+ weight?: "bold" | "medium" | "semibold" | "regular";
+ multiline?: boolean; // New prop to control single-line vs multi-line
+ disabled?: boolean; // New prop to disable editing
+ onChange: (value: string) => Promise
+
+ handleUrlChange(data.value)}
+ placeholder="https://example.com"
+ disabled={isSubmitting}
+ size="small"
+ />
+
+ {urlError && (
+ {urlError}
+ )}
+
+
+
+
+ setName(data.value)}
+ placeholder="Display name for the resource"
+ disabled={isSubmitting}
+ size="small"
+ />
+
+
+
+ {url && validateUrl(url) && (
+
+
+ {saveError}
+
+
+ )}
+
+
+ }
+ onClick={handleRemove}
+ disabled={isSubmitting}
+ size="small"
+ >
+ Remove
+
+
+
+
+ }
+ onClick={onCancel}
+ disabled={isSubmitting}
+ size="small"
+ onMouseEnter={() => setIsCancelHovered(true)}
+ onMouseLeave={() => setIsCancelHovered(false)}
+ style={{
+ backgroundColor: isCancelHovered ? theme.background.tertiary : "transparent",
+ color: isCancelHovered ? theme.text.primary : theme.text.secondary,
+ border: `1px solid ${isCancelHovered ? theme.border.secondary : theme.border.primary}`,
+ }}
+ >
+ Cancel
+
+ }
+ onClick={handleSave}
+ disabled={isSubmitting || !url.trim() || !hasChanges}
+ size="small"
+ >
+ {isSubmitting ? "Saving..." : "Save"}
+
+
+
+ {label && (
+
+ {label}
+
+ )}
+ {isEditing ? (
+ <>
+
+ {multiline ? (
+