Strategy Site¶

The Strategy Site is the primary interface for creating and editing technology strategy content. It is designed for low-friction editing during meetings so that discussions are immediately captured as structured, actionable strategy.

URL: https://localhost:5001/strategy (development)

Logging In¶

Navigate to the Strategy Site URL. If you are not logged in, you are presented with a login form. Enter your username and password to access the site.

Development credentials

In development mode, use editor/editor for editing access or viewer/viewer for read-only access. See Quick Start for all seeded users.

Layout¶

After login, you land on the Principles view for a team. If you have visited before, the tool remembers your last selected team. Otherwise, you see the first team.

Team banner — shows the current team name in the team's color with a gradient background. This is your persistent context — everything below relates to this team.
View tabs — to the right of the team name: Principles and Objectives. These are the two main views.
Connection status — a colored dot indicator (green = connected, orange = connection issue)
User badge — your role and username
Export button — PowerPoint-style icon to download the team's strategy
Logout button

Team Selection¶

Click the team name in the banner. A dropdown appears showing all teams, each with a colored dot. Click a team to switch. The entire view reloads with that team's data, and the banner color changes to the team's color.

Your team selection is persisted across page reloads.

Views¶

Principles View¶

The Principles view displays the team's guiding principles as cards in a responsive grid (3 columns on wide screens, responsive down to 1). Each principle card shows:

Shield icon — visual marker for principle cards
Title — supports *highlight* syntax (see below) for emphasizing key terms in the team color
Description — longer text describing the principle
Toolbar — appears on hover with edit and delete actions (editors and admins only)

Objectives View¶

The Objectives view shows the team's measurable goals, organized under group headings. Ungrouped objectives appear under a "General" heading. Each objective card shows:

Title and Description — inline editable fields
Linked Principles — the principles this objective supports
Initiatives — concrete work items with individual progress bars
Total Progress — a progress bar at the bottom showing the average of all initiative progress

Inline Editing¶

All text fields use inline editing. As a Viewer, you can browse everything but cannot edit. As an Editor or Admin, you can click on fields to edit them.

Starting an edit¶

Click on any editable text (principle title, principle description, objective title, initiative name, group name, group description). The text transforms into an input field with a colored border matching the team color. The cursor is placed at the end of the existing text.

Saving¶

Click away from the field (blur) or press Enter to save. For multi-line fields (descriptions), Enter adds a new line — click away to save. A small spinner appears on the field while the save is in progress. After a moment, the spinner disappears and the field returns to its normal display with the confirmed server value.

Server confirmation

The value you see after the spinner disappears is the actual saved state from the server, not your local edit. This ensures you always see what was actually persisted.

Canceling¶

Press Escape to discard your changes and return to the original value. If you clear a required field (empty title/name) on an existing entity, the edit is canceled and the previous value is restored. If you clear a field on a newly created entity that has never been saved, the entity is removed entirely (creation is canceled).

Conflict handling¶

If another user edits the same field while you are editing it, the server detects the conflict when you save:

The field shows an error banner with the current server value
You can choose Retry (submit your value again) or Cancel (discard your change and accept the current server value)
The error message shows what the current server value is so you can make an informed decision

This prevents silent data loss when multiple users edit simultaneously.

How conflicts are detected

Each field tracks a lastSeenSequence number. When you save, the server compares your sequence against the field's current sequence. If they do not match, another change happened in between and your edit is rejected as a conflict.

Connection timeout¶

If the spinner persists for an unusually long time (around 30 seconds), the tool automatically checks the server for the current state and resolves the field. You are never left in a permanently "saving" state.

Highlight Syntax¶

Principle titles (and objective titles) support a highlighting convention for emphasizing domain terms. Wrap a word or phrase in single asterisks to display it in the team's color with heavier font weight:

You type	It displays as
`API-First Design`	API-First Design (with "API-First" in team color)
`Prefer Cloud-Native Solutions`	Prefer Cloud-Native Solutions

Doubled asterisks (**) are treated as an escaped single asterisk
Unclosed asterisks render as-is with the raw asterisks visible — fix by adding the closing asterisk

Working with Principles¶

Creating a principle¶

Switch to the Principles tab
Click Add Principle — a placeholder card appears at the end of the grid with the title field in edit mode
Type a title for the principle
Press Enter or click away to save — the principle is created on the server with your title
Click the description field to add a description

Deferred creation

The principle is not saved to the server until you provide a title. If you press Escape or click away without typing a title, the placeholder is discarded with no server interaction.

Deleting a principle¶

Click the delete icon on the principle card toolbar. A confirmation dialog appears. Deleting a principle removes it from any objectives that reference it — the objectives themselves are not deleted.

Working with Objectives¶

Creating an objective¶

Switch to the Objectives tab
Click Add Objective — a placeholder card appears in the "General" (ungrouped) section with the title field in edit mode
Type a title for the objective
Press Enter or click away to save — the objective is created on the server with your title
Click the description field to add a description

Deferred creation

The objective is not saved to the server until you provide a title. If you press Escape or click away without typing a title, the placeholder is discarded with no server interaction.

Linking principles (Principle Selector)¶

Each objective card has a toolbar that appears on hover. Click the link/chain icon ("Add principle") to open the principle selector popup:

The selector popup:

Search box at the top — type to filter the list in real time
"Create principle" option — always visible at the top, creates a new principle and assigns it
Your team's principles — listed first, showing only principles not already assigned to this objective
Other teams' principles — grouped by team name, each with a colored team tag

Same-team assignment: Click a principle from your team's list. It is immediately assigned by reference — if someone later edits the principle's title, the change is reflected everywhere.

Cross-team assignment: Click a principle from another team. The tool creates an independent copy in your team and assigns the copy. The copy starts with the same title and description but is a separate entity — edits to the original do not affect your copy, and vice versa. The new principle also appears in your team's Principles view.

Create new: The "Create principle" button is disabled when the search box is empty. Type a name to enable it — the button label updates to show "(new) Create 'typed text'". Click the button to create a new principle with that name and assign it to the objective. The view switches to the Principles view where the new principle appears.

Removing a principle from an objective: In the objective card, hover over an assigned principle. Two small icons appear: a navigate arrow (jumps to the principle in the Principles view) and a minus icon (removes the association without deleting the principle itself).

Managing groups¶

Groups organize objectives visually in the Objectives view:

Create a group using the "Add Group" button — a placeholder group appears with the name field in edit mode. Type a name and press Enter or click away to save. Press Escape or leave the name empty to discard.
Assign an objective to a group by selecting the group from the objective's group dropdown
Unassign by clearing the group selection — the objective moves back to "General"
Groups can have an optional name and description, both editable inline

Drag-and-drop reordering¶

Objectives, groups, principles, and initiatives all support drag-and-drop reordering:

What	How	Notes
Principles	Drag cards in the Principles view	Changes display order
Objectives	Drag cards within or between groups	Moving to a different group reassigns the objective
Groups	Drag group headers in the Objectives view	Reorders the group sections
Initiatives	Drag items within an objective card	Reorders the initiative list

Each card has a drag handle (three horizontal lines) that appears in the toolbar on hover. Grab the handle to start dragging. A visual indicator shows where the item will be placed. Drop to save — the reorder is persisted immediately and other users see the change in real time.

Concurrent reordering

If two users reorder at the same time, both reorders are applied sequentially. The final result may differ from what either user expected individually, but the outcome is always consistent for all users.

Working with Initiatives¶

Adding an initiative¶

Click Add Initiative on an objective card
The initiative appears with its name field in edit mode — start typing
Press Enter or click away to save
The initiative is created with 0% progress

Deferred creation

The initiative is not saved to the server until you provide a name. If you click away without typing a name, the initiative is discarded.

Editing progress¶

Click on an initiative's progress bar to open the progress editor. Use the slider to set the completion percentage (0-100%). The objective's total progress bar updates automatically (it shows the average of all initiative progress values).

Jira integration¶

Initiatives support an optional Jira key field. Enter a Jira issue key (e.g., PROJ-123) to associate the initiative with an external issue tracker.

History¶

Click the history icon on any card to view its event history. The history popup shows:

All changes made to the entity, in chronological order
Who made each change and when
The ability to re-apply previous changes

PowerPoint Export¶

Select the team you want to export using the team switcher
Click the export button (PowerPoint-style icon) in the team banner — visible regardless of which view you are in
The tool generates a PowerPoint file and your browser downloads it automatically

What the export contains:

Principles slides — principle cards laid out in a grid (up to 3x3 per slide), showing titles with highlighted terms and descriptions
Objectives slides — objective cards laid out in a grid (up to 3x2 per slide), showing titles, associated principles, initiatives with progress, and total progress
The slides use the team's color for accents and highlighting, matching the on-screen appearance
Content overflows onto additional slides as needed

Any user with Viewer access or above can generate an export.

Connection Status¶

The header shows a connection status indicator:

Indicator	Meaning
Green dot	Connected — real-time updates are active
Orange dot (pulsing)	Stale — no updates received recently, data may be outdated
Red dot	Disconnected — connection lost, changes from other users will not appear

The connection recovers automatically. When it reconnects, the view refreshes to show the latest data.

Keyboard Shortcuts¶

Key	Context	Action
Enter	Edit mode (single-line)	Save the field
Enter	Edit mode (multi-line)	Add a new line
Escape	Edit mode	Cancel editing, restore original value